微信小程序 组件通信

88 阅读1分钟

父组件传给子组件

父组件注册子组件

//home.json
"usingComponents": {
    "Search":"../../components/search/Search",
  },

使用子组件传入参数

<Search name="张大狗子"></Search>

子组件中声明接收

//Search.js
 properties: {
    name:{
      type:String,
      value:"狗子"
    }
  },

模板中使用

//Search.wxml
<input placeholder="请输入搜索内容" type="text" bindtap="handleTap"/>
{{name}}

子组件传给父组件

子组件绑定自定义事件

//home.wxml
<Search bindevent="handleEvent"></Search>
//home.js
  handleEvent(e){
    //e.detail为子组件传给父组件的数据
    console.log(e.detail);
  },

子组件触发自定义事件并传入参数

//Search.js
methods: {
    handleTap(){
      this.triggerEvent("event",this.data.person)
    }
  }

路由跳转携带参数

跳转页面

handleChangePage(evt){
    const id = evt.currentTarget.dataset.id
    const name = evt.currentTarget.dataset.name
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}&name=${name}`,
    })

onLoad生命周期获取

//detail.js
  onLoad(options) {
    wx.setNavigationBarTitle({
      title: options.name,
    })
    this.getDetailInfo(options.id);
    this.getDetailInfo(options.name);
  },