Vue中子組件數據跟着父組件改變和父組件數據跟着子組件改變的方法

本文轉載自查看原文 2019-10-11 10:54 3253 vue

一，子組件數據跟着父組件改變

父組件的代碼

 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中定義一下來使用。

轉載自：https://juejin.im/post/5c71584e6fb9a049d4427063

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue子組件數據跟着父組件改變父組件值改變，但調用子組件時子組件數據不刷新問題 vue父組件數據改變，子組件數據並未發生改變（那是因為你沒寫監聽）附帶子組件的寫法父組件數據改變，子組件ECharts數據重新渲染 vue 父組件調用子組件數據 vue父組件數據更新，子組件沒有變化。 vue 子組件調用父組件數據 vue子組件數據變化同步到父組件中 vue 父組件數據修改，子組件數據未修改父組件如何獲取子組件數據，子組件如何獲取父組件數據，父子組件如何傳值