vue中使用watch实现父子组件双向绑定

在子组件中使用watch进行双向绑定

1. 先实现父组件向子组件传值，子组件使用props进行数据的接收
2. 因为Vue规定props中的数据不能随意改动，所以需要将props中的数据本地化，具体方法是在data中定义新属性,将props中的数据赋值给新属性

   props:{
     number: Number  
   },
   data(){
       return{
           childNum: this.number
       }
   }    
   

3. 用v-model对新属性实现双向绑定，并用watch属性监听新属性的变化，最后将变化后的值广播给父组件

   <input type="text" v-model='childNum' />
   

   watch:{
       childNum(newValue){
           this.$emit('numchanged', this.childNum)
       }
   }
   

4. 父组件在引用子组件的地方进行监听，并自定义方法接收子组件传来的数据，从而实现父子组件双向绑定

   <cpn :number=num @numchanged='numchanged' />
   

    methods: {
        numchanged(value){
          this.num = parseFloat(value);
        }
      }
   

完整代码：

  <div id="app">
    <cpn :number=num @numchanged='numchanged' />
  </div>

  <template id='cpn'>
    <div>
      <h2>父组件传过来的值：{{number}}</h2>
      <p>子组件自定义属性接收父组件的值：{{childNum}}</p>
      <input type="text" v-model='childNum' />
    </div>
  </template>

    const child = {
      template: '#cpn',
      props: {
        number: Number,
      },
      data(){
        return{
          childNum: this.number,
        }
      },
      watch: {
        childNum(newValue){
          this.$emit('numchanged', this.childNum)
        }
      }
    }


    const vm = new Vue({
      el: '#app',
      data: {
        num: 100,
      },
      methods: {
        numchanged(value){
          this.num = parseFloat(value);
        }
      },
      components: {
        'cpn': child
      }
    })