O valor e o espaço entre os componentes filho e pai do miniaplicativo WeChat

O componente pai passa o valor para o componente filho

Componente personalizado Nav, registre e use no componente pai

Personalize os atributos hello e name no rótulo do componente

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

Dados Arrs no componente pai

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

Registre as propriedades personalizadas nas propriedades do subcomponente Nav

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

 Renderizar matrizes diretamente em modelos 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>

 

O componente filho passa valor para o componente pai

 

Crie um componente filho personalizado MyBtn, registre-o e use-o no componente pai

Clique de evento de definição de subcomponente

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

 MyBtn .js

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

Renderizar no componente pai

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

Js no componente pai

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

O componente filho passa o valor para o componente pai, e o evento customizado triggerEvent é passado na forma de um evento no componente customizado  . Chame o componente na forma do rótulo do componente no componente pai e vincule o evento personalizado a este rótulo do componente

Slot de miniaplicativo

Espaço reservado de slot no componente personalizado, para obter o conteúdo do rótulo, use o componente de slot

Wxml do componente pai

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

Submontagem

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