Vue学习笔记-父子通信案例

 <div id="app">
     <cpn :number1="num1"
          :number2="num2"
          @num1change="numchange1"
          @num2change="numchange2"
     >

     </cpn>
 </div>

 <template id="cpn">
     <div>
         <!--1.子组件里的双向绑定只能用子组件data里面的值-->

         <!--<h2>{{number1}}</h2>-->
         <!--&lt;!&ndash;props单向数据流，不允许子组件直接改变props里面的值&ndash;&gt;-->
         <!--&lt;!&ndash;<input type="text" v-model="number1">&ndash;&gt;-->
         <!--&lt;!&ndash;可以用子组件data里面的数据实现双向绑定&ndash;&gt;-->
         <!--<input type="text" v-model="dnumber1">-->
         <!--<h2>{{number2}}</h2>-->
         <!--<input type="text" v-model="dnumber2">-->

         <!--2.子组件的值改变时传到父组件改变父组件的值-->
         <!--v-model的本质是v-bind绑定一个value属性,v-on指令给当前元素绑定input事件-->

         <h2>{{number1}}</h2>
         <input type="text" :value="dnumber1" @:input="num1Input">
         <h2>{{number2}}</h2>
         <input type="text" :value="dnumber2" @:input="num2Input">
     </div>
 </template>

 </body>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
     const cpn = {
         template: '#cpn',
         props: { //props单向数据流，父组件传递到子组件的值不允许子组件直接改变
             number1: Number,
             number2: Number
         },
         data() { //想要修改props里的值可以在data里面保存一份，然后修改
             return {
                 dnumber1: this.number1,
                 dnumber2: this.number2
             }
         },
         methods: {
             num1Input (event) {
                 this.dnumber1 = event.target.value
                 this.$emit('num1change',this.dnumber1)
             },
             num2Input (event) {
                 this.dnumber2 = event.target.value
                 this.$emit('num2change',this.dnumber2)
             }
         }
     }
     const app = new Vue ({
         el: '#app',
         data: {
             num1: 1,
             num2: 2
         },
         components: {
                 cpn
         },
         methods: {
             numchange1 (value) {
                 this.num1 = parseInt(value)
             },
             numchange2 (value) {
                 this.num2 = parseInt(value)
             }
         }
     })
 </script>