一，子组件数据跟着父组件改变
父组件的代码
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中定义一下来使用。