一.Vue中父組件向子組件傳值

利用v-bind向子組件傳值，子組件中利用props接受

<div id='app'> <father></father></div><template id='father'> <div> <!--注意點: 組件是可以使用自己的數據的--> <p>{{name}}</p> <p>{{age}}</p> <!--這里將父組件的name通過parentname傳遞給了子組件--> <son :parentname='name' :abc='age'></son> </div></template><template id='son'> <div> <!--這里通過parentname使用了父組件傳遞過來的數據--> <p>{{parentname}}</p> <p>{{abc}}</p> </div></template><script> // 父組件 Vue.component('father', { template: '#father', data: function(){ return { name: 'wqd', age: 21 } }, // 子組件 components: { 'son': {template: '#son',//這里通過parentname接收了父組件傳遞過來的數據props: ['parentname', 'abc'] } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

二.Vue中父組件向子組件傳遞方法

父組件利用v-on傳值，子組件this.$emit來接收

<div id='app'> <father></father></div><template id='father'> <div> <button @click='say'>我是按鈕</button> <!--這里通過parentsay將父組件的say方法傳遞給了子組件--> <son @parentsay='say'></son> </div></template><template id='son'> <div> <button @click='sonFn'>我是按鈕</button> </div></template><script> // 父組件 Vue.component('father', { template: '#father', methods: { say(){console.log('helloworld') } }, // 子組件 components: { 'son': {template: '#son',/*注意點: 和傳遞數據不同, 如果傳遞的是方法, 那么在子組件中不需要接收，需要在子組件自定義的方法中通this.$emit('自定義接收的名稱')的方法來觸發父組件傳遞過來的方法*/// props: ['parentsay']methods: { sonFn(){ this.$emit('parentsay'); }} } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

三.Vue中子組件向父組件傳值

this.$emit中第一個參數為接收父組件傳遞的方法，第二個參數即為向父組件傳遞的值

<div id='app'> <father></father></div><template id='father'> <div> <button @click='say'>我是按鈕</button> <!--這里通過parentsay將父組件的say方法傳遞給了子組件--> <son @parentsay='say'></son> </div></template><template id='son'> <div> <button @click='sonFn'>我是按鈕</button> </div></template><script> // 父組件 Vue.component('father', { template: '#father', methods: { //data用來接受子組件傳遞的值 say(data){console.log(data); } }, // 子組件 components: { 'son': {template: '#son',methods: { sonFn(){ // 第一個參數: 需要調用的函數名稱 // 后續的參數: 給調用的函數傳遞的參數 this.$emit('parentsay', '你好'); }} } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

到此這篇關于Vue中父子組件的值傳遞與方法傳遞的文章就介紹到這了,更多相關Vue父子組件傳遞內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！