微信小程序---组件通信，传递内容slot，获取组件实例

 

 

父传子

WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据

父组件：

  <comA title="今天学习组件"> </comA>

子组件：

接收：

properties: {
        title: ''
    },
    data: {
        content: '子组件内容'
    },

 子组件页面显示：

<view>
    <text>标题：{{title}}</text>
</view>
<view>
    <text>内容：{{content}}</text>
</view>

---

---

 

子传父：

子组件页面：

<view>
    <text>标题：{{title}}</text>
</view>
<view>
    <text>内容：{{content}}</text>
</view>
<button bind:tap="show" type="primary" size="mini">确定 </button>

触发事件

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

  data: {
        content: '子组件内容'
    },
    methods: {
        show() {
            console.log('show method >>>>', this.data.content);
            this.triggerEvent('myEvet', this.data.content)
        },
    }

父组件：（子组件自定义事件）

  <comA title="今天学习组件" bind:myEvet='Event'> </comA>

  data: {
        message:''
    },
    Event(content){ 
        const message = content.detail
        this.setData({message})
    },

---

插槽：slot

在父组件中，把子组件包裹的内容用插槽显示出来

 在子组件：multipleSlots:true支持slot

  options: {
        multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
      },

<slot name="footer"></slot>

 获取实例：(如何获取到组件中方法、实例)

 

---