WeChatアプレットの子コンポーネントと親コンポーネントの間の値とスロット

親コンポーネントは値を子コンポーネントに渡します

カスタムコンポーネントナビゲーション、登録して親コンポーネントで使用

コンポーネントラベルの属性helloとnameをカスタマイズします

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

親コンポーネントのArrsデータ

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

サブコンポーネントNavのプロパティにカスタムプロパティを登録します

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

 サブコンポーネントテンプレートで配列を直接レンダリングする

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

 

子コンポーネントは親コンポーネントに値を渡します

 

カスタム子コンポーネントMyBtnを作成し、登録して親コンポーネントで使用します

サブコンポーネント定義イベントクリック

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

 MyBtn .js

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

親コンポーネントでレンダリング

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

親コンポーネントのJ

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

子コンポーネントは値を親コンポーネントに渡し、triggerEventカスタムイベントはイベントの形式でカスタムコンポーネントに渡され ます。親コンポーネントのコンポーネントラベルの形式でコンポーネントを呼び出し、カスタムイベントをこのコンポーネントラベルにバインドします

アプレットスロット

カスタムコンポーネントのスロットプレースホルダー。ラベルの内容を取得するには、スロットコンポーネントを使用します。

親コンポーネントwxml

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

サブアセンブリ

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