微信小程序-父子组件通讯

基于confirm组件
使用微信开发者工具

最近在学习微信小程序,不止一个页面有confirm，所以决定把他抽离成一个组件。刚好就涉及到了父子组件之间的通讯问题。

如何创建组件,引入组件

创建组件

image

首先在components文件夹下新建g-confirm文件夹。右键点击新建component。会新建四个文件。

image

因为文件内有关于组件的配置问题，所以不太建议新手自己手动创建。

引入组件

在pages/index文件夹下也就是主页目录下，下打开index.json配置文件。
在usingComponents配置下引入想使用的任何自定义组件

image

在index.wxml中引入组件

<!--index.wxml-->
<view class="container">
  <text>这是在主页内</text>
  <g-confirm></g-confirm>
</view>

成功引入自定义组件

image

confirm组件

需求: 点击按钮调出confirm,用户输入后获取输入的内容. 因为把confirm抽离成组件,所以涉及到了组件之间的通信

点击按钮confirm出现,选择后confirm隐藏

使用visible的值控制confirm

index.wxml

<button bind:tap="click">添加任务</button>
<g-confirm visible="{{visible}}" bind:sureClick="sureClick" bind:cancelClick="cancelClick"></g-confirm> 
// 使用visible组件,并将visible的值传递给confirm
// 监听子组件触发的事件,并做出相应
<view >用户输入的是--{{inputValue}}</view>

index.js

data;{
    visible: false,
    inputVale: ""
},
click(){
    this.setData({
        visible: true
    })
},
sureClick(event){
    this.setData({
        visible: false
    })
},
cancelClick(){
    this.setData({
        visible: false
    })
}
// 当子组件按钮被点击时触发,隐藏confirm

g-confirm.wxml

<view class="confirmWrapper" wx:if="{{visible}}">
// wx:if和v-if类似,只有值为true时才渲染
  <view class="confirm">
  <textarea class="input"></textarea>
  <view class="actions">
    //给按钮绑定事件
    <view class="sure" bind:tap="sureClick">确定</view>
    <view class="cancel" bind:tap="cancelClick">取消</view>
  </view>
  </view>
</view>

g-confirm.js

 // 接收参数
  properties: {
    visible: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    sureClick() {
      this.triggerEvent("sureClick",'按钮被点击');
      // 微信小程序的事件中心,类似 emit()
      // 触发sureClick事件
    },
    cancelClick() {
      this.triggerEvent("cancelClick");
    }
  }

监听用户输入的内容,传递给父组件

用户输入完毕后,将用户输入的内容展示到页面
g-confirm.wxml

<textarea value="{{value}}" bind:input="watchInput"></textarea>
// 监听input输入框,用户输入内容改变都会触发

g-confirm.js

  data: {
    value: ""
  },
  methods: {
    watchInput(event) {
      this.data.value = event.detail.value;
      // input内容每次变动,就把他存到data里
    },
    sureClick() {
      this.triggerEvent("sureClick",this.data.value);
      // 事件中心, 点击确认后将value传递给父组件
    },
    cancelClick() {
      this.triggerEvent("cancelClick");
    }
  }

index.wxml

  <g-confirm bind:sureClick="sureClick" bind:cancelClick="cancelClick" ></g-confirm>
  <view >用户输入的是--{{inputValue}}</view>
  // 绑定inputValue值

index.js

  data: {
    inputValue: ""
  },
  sureClick(event){
    this.setData({
      inputValue: event.detail
    })
    // 只有通过setData改变data的值,页面内容才会同步刷新
  }