Vue父子组件的双向绑定

1. 父组件

   [title] [lang:language] [url] [link text]
   <template>
     <div class="home">
       <Innput v-model="vvv"></Innput> //自定义组件，使用v-model实现双向绑定
       <div>子组件</div> //子组件改变，父组件对应跟着改变
     </div>
   </template>
   
   <script>
   import Innput from '../components/input.vue';
   export default {
     name: 'Home',
     components: {
       Innput
     },
     data() {
       return {
         vvv: 123
       }
     }
   }
   </script>

2. 子组件

   [title] [lang:language] [url] [link text]
   <template>
     <div>
         <input type="text" v-model="newValue"> //绑定计算属性
     </div>
   </template>
   
   <script>
   export default {
       props: {
           value: {
                   type: Number,
                   default: () => 0
                   }
       },
       computed: {
           newValue:{
               get() {
                   return Number(this.value)
               },
               set(val) {
                   this.$emit('input', Number(val))
               }
           }
       }
   }
   </script>

3. 方法总结:
   父组件通过v-model绑定一个变量传给子组件
   子组件通过props[‘value’]接收
   子组件通过$emit(‘input’,XX）去改变父组件中v-model绑定的变量