属性绑定

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

父组件的data

  data: {
    count: 99
  },

父组件的结构

<test4 ccount="{{count}}"></test4>
<view> 数据：{{count}}</view>

子组件

  /**
   * 组件的属性列表
   */
  properties: {
    ccount:Number
  },

子组件的结构

<view>这是组件4</view>
<view>父组件传递过来的数据：{{ccount}}</view>

事件绑定

• 用于子组件向父组件传递数据，可以传递任意数据
  

1. 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

   syncount(e){
   console.log(e.detail.value);
   this.setData({
     count1:e.detail.value
   })
   },

2. 在父组件的 wxml 中，通过自定义事件的形式，将步骤 1 中定义的函数引用，传递给子组件

   {{count1}}
   <test5 bind:sync="syncount"></test5>

3. 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { / 参数对象 / }) ，将数据发送到父组件

   addcount(){
     this.setData({
       count:this.data.count+1
     })
     // 调用父组件的sync函数
     this.triggerEvent('sync',{value:this.data.count})
   }

4. 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据

   syncount(e){
   console.log(e.detail.value);
   this.setData({
     count1:e.detail.value
   })
   },

获取组件实例

可在父组件里调用this.selectComponent("id或class选择器") ，获取子组件的实例对象，从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器，例如 this.selectComponent(".my-component")

子组件

<view>子组件</view>
<view>
姓名：{{username}}===密码：{{password}}===年龄：{{age}}
</view>

   /**
     * 组件的初始数据
     */
    data: {
        username:"tomcat",
        password:"123",
        age:18
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 修改子组件年龄
        addAge(){
            this.setData({
                age:100
            })
        }
    }

父组件

<test3 id="abc"></test3>
<view>````````````````````````````````````````````````````````````````````</view>
<button bindtap="getComp" type="warn" size="mini">获取子组件的实例对象</button>

//获取子组件的实例对象
getComp(){
  //参数是一个选择器
  const child = this.selectComponent('#abc')
  console.log(child)
  console.log("用户名："+child.data.username)
  child.addAge();
},