微信小程序中,父组件调用子组件方法,以及子组件调用父组件方法

154 阅读1分钟

父组件

index.wxml

// id是给子组件命名,然后用selectComponent可以取得子组件实例
// bindhandleSearchEvent是传入到子组件的方法,子组件通过triggerEvent,调用该方法
<search_bar id="indexSearchBar" bindhandleSearchEvent="handleSearchEvent"></search_bar>

index.js

onLoad() {
    // 父组件调用子组件方法
    this.searchBarComp = this.selectComponent("#indexSearchBar")
    this.searchBarComp.handleSearchEvent()
    // 父组件调用子组件的data参数
    console.log(this.searchBarComp.data.keyword)
},
handleSearchEvent() {
    console.log("index=>handleSearchEvent")
},

子组件

searchBar.wxml

<button class="btnSearch" type="default" bindtap="handleSearchEvent">搜索</button>

searchBar.js

methods: {
    handleSearchEvent: function () {
        // 子组件调用父组件的方法
        this.triggerEvent("handleSearchEvent")
    },
},