The value and slot between the child and parent components of the WeChat applet

The parent component passes the value to the child component

Custom component Nav, register and use in the parent component

Customize the attributes hello and name on the component label

<Nav hello="{
   
   {arrs}}" name="navs"></Nav>

Arrs data in the parent component

 data: {
    arrs:[
      {
        id:0,
        title:'足球'
      },
      {
        id:1,
        title:'篮球'
      },
      {
        id:2,
        title:'排球'
      },
      {
        id:3,
        title:'乒乓球'
      },
      {
        id:4,
        title:'羽毛球'
      }
    ],
}

Register the custom properties in the properties of the subcomponent Nav

properties: {
    name:{
      type:String,
      value:''
    },
    hello:{
        type:Array,
        value:[]
    }
  },
}

 Directly render arrays in sub-component templates

<view class="tencentNews-nav">
  <view 
  wx:for="{
   
   {hello}}" 
  wx:key="id"
  bindtap="click2"
  data-index="{
   
   {index}}"
  class="{
   
   {idx2 == index ? 'active' : ''}}"
  >{
   
   {item.title}}</view>
</view>
<view>{
   
   {name}}</view>

 

Child component passes value to parent component

 

Create a custom child component MyBtn and register and use it in the parent component

Subcomponent definition event click

<view>
  <button type="primary" bindtap="click">子组件传父组件</button>
</view>

 MyBtn .js

methods: {
    click:function(){
      console.log("__________")
      //自定义一个事件 第一个参数 事件名 第二个参数 是传递的数据
      this.triggerEvent('myClick',{
        'name':'小程序',
        'age':'5'
      })
    }
  }

Render in the parent component

<MyBtn bindmyClick="hello"></MyBtn>
<view>
  {
   
   {name}}{
   
   {age}}
</view>

Js in parent component

data: {
    name:'',
    age:''
},
hello:function(e){
    console.log('---父组件中-------')
    console.log(e.detail)
     //获取子组件传递的数据
    var datas = e.detail
    this.setData({
      name:datas.name,
      age:datas.age
    })
  },

The child component passes the value to the parent component, and the triggerEvent custom event is passed in the custom component in the form of an  event. Call the component in the form of the component label in the parent component, and bind the custom event to this component label

Applet slot

Slot placeholder in the custom component, to obtain the label content, use the slot component

Parent component wxml

<MyBtn bindmyClick="hello">
  <view>小程序中slot</view>
</MyBtn>

Subassembly

<view>
  <slot></slot>
</view>