El valor y el espacio entre los componentes secundario y principal del subprograma WeChat

El componente principal pasa el valor al componente secundario

Navegación de componente personalizado, registro y uso en el componente principal

Personalice los atributos hola y el nombre en la etiqueta del componente

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

Datos arrs en el componente principal

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

Registre las propiedades personalizadas en las propiedades del subcomponente Nav

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

 Representar matrices directamente en plantillas de subcomponentes

<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>

 

El componente secundario pasa el valor al componente principal

 

Cree un componente secundario personalizado MyBtn y regístrelo y utilícelo en el componente principal

Clic de evento de definición de subcomponente

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

 MyBtn .js

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

Renderizar en el componente padre

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

Js en el componente principal

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

El componente secundario pasa el valor al componente principal y el evento personalizado triggerEvent se pasa en forma de evento en el componente personalizado  . Llame al componente en forma de etiqueta de componente en el componente principal y vincule el evento personalizado a esta etiqueta de componente

Ranura para applet

Marcador de posición de ranura en el componente personalizado, para obtener el contenido de la etiqueta, utilice el componente de ranura

Componente principal wxml

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

Subconjunto

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