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

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

<div id='app'> <father></father></div><template id='father'> <div> <!--注意點(diǎn): 組件是可以使用自己的數(shù)據(jù)的--> <p>{{name}}</p> <p>{{age}}</p> <!--這里將父組件的name通過parentname傳遞給了子組件--> <son :parentname='name' :abc='age'></son> </div></template><template id='son'> <div> <!--這里通過parentname使用了父組件傳遞過來(lái)的數(shù)據(jù)--> <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接收了父組件傳遞過來(lái)的數(shù)據(jù)props: ['parentname', 'abc'] } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

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

父組件利用v-on傳值，子組件this.$emit來(lái)接收

<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',/*注意點(diǎn): 和傳遞數(shù)據(jù)不同, 如果傳遞的是方法, 那么在子組件中不需要接收，需要在子組件自定義的方法中通this.$emit('自定義接收的名稱')的方法來(lái)觸發(fā)父組件傳遞過來(lái)的方法*/// props: ['parentsay']methods: { sonFn(){ this.$emit('parentsay'); }} } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

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

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

<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用來(lái)接受子組件傳遞的值 say(data){console.log(data); } }, // 子組件 components: { 'son': {template: '#son',methods: { sonFn(){ // 第一個(gè)參數(shù): 需要調(diào)用的函數(shù)名稱 // 后續(xù)的參數(shù): 給調(diào)用的函數(shù)傳遞的參數(shù) this.$emit('parentsay', '你好'); }} } } }); // 這里就是MVVM中的View Model let vue = new Vue({ el: ’#app’, // 這里就是MVVM中的Model data: { }, });</script>

到此這篇關(guān)于Vue中父子組件的值傳遞與方法傳遞的文章就介紹到這了,更多相關(guān)Vue父子組件傳遞內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！