一，子组件数据跟着父组件改变
父组件的代码
1 <template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png"> 4 <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--> 5 父组件的值<input type="text" v-model="parentVal"> 6 <div> 7 <child-test :inputData="parentVal"></child-test> 8 </div> 9 </div> 10 </template> 11 <script> 12 // @ is an alias to /src 13 import HelloWorld from '@/components/HelloWorld.vue' 14 import ChildTest from '@/components/child-test.vue' 15 export default { 16 name: 'home', 17 components: { 18 HelloWorld,ChildTest 19 }, 20 data() { 21 return { 22 parentVal: 100, 23 } 24 }, 25 } 26 </script>
子组件的代码如下：
1 <template> 2 <div class="child"> 3 子组件<input type="text" v-model="childVal"> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: 'child', 9 props: { 10 inputData: { 11 } 12 }, 13 data() { 14 return { 15 childVal: this.inputData 16 } 17 }, 18 watch: { 19 inputData(newVal){ 20 this.childVal = newVal; 21 } 22 } 23 } 24 </script>
总结：父组件通过props传值给子组件，子组件通过watch监听父组件传过来的值改变来重新更新子组件的值。以此来达到子组件的值跟随父组件的值改变。如果不使用watch，虽然父组件传过来的值改变了，但是子组件不会自动更新。
二，父组件数据跟着子组件改变
父组件代码
1 <template> 2 <div class="home"> 3 <img alt="Vue logo" src="../assets/logo.png"> 4 <!--<HelloWorld msg="Welcome to Your Vue.js App"/>--> 5 父组件的值<input type="text" v-model="parentVal"> 6 <div> 7 <child-test @childValInput="childVal" :inputData="parentVal"></child-test> 8 </div> 9 </div> 10 </template> 11 <script> 12 // @ is an alias to /src 13 import HelloWorld from '@/components/HelloWorld.vue' 14 import ChildTest from '@/components/child-test.vue' 15 export default { 16 name: 'home', 17 components: { 18 HelloWorld,ChildTest 19 }, 20 data() { 21 return { 22 parentVal: 100, 23 } 24 }, 25 methods: { 26 childVal(val) { 27 this.parentVal = val; 28 } 29 } 30 } 31 </script
子组件代码
1 <template> 2 <div class="child"> 3 子组件<input type="text" v-model="childVal"> 4 </div> 5 </template> 6 <script> 7 export default { 8 name: 'child', 9 data() { 10 return { 11 childVal: 10 12 } 13 }, 14 watch: { 15 childVal(newVal){ 16 this.$emit('childValInput',this.childVal) 17 } 18 } 19 } 20 </script>
总结：父组件中要@方法来接收子组件传递的emit，使用时要在methods中定义一下来使用。