您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Vue父組件和子組件之間數(shù)據(jù)傳遞和方法怎么調(diào)用”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue父組件和子組件之間數(shù)據(jù)傳遞和方法怎么調(diào)用”吧!
vue組件在通信中,無(wú)論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個(gè)共同點(diǎn)就是有中間介質(zhì),子向父的介質(zhì)是自定義事件,父向子的介質(zhì)是props中的屬性。
父組件向子組件傳值(子組件主動(dòng)獲取父組件的數(shù)據(jù)和方法)
父組件import引用子組件 使用子組件時(shí)在子組件上添加一個(gè)v-bind屬性,并綁定上數(shù)據(jù) 在子組件中創(chuàng)建 props ,在props 中創(chuàng)建相同的屬性名,用來(lái)接收數(shù)據(jù) 把接收到的數(shù)據(jù)在子組件中使用
子組件向父組件傳值(父組件主動(dòng)獲取子組件的數(shù)據(jù)和方法)
子組件中需要發(fā)出該自定義事件,可以是按鈕的點(diǎn)擊事件,也可以是其他方式 將需要傳的值放在 $emit 第二個(gè)參數(shù)的位置,這個(gè)參數(shù)會(huì)被傳給父組件中的響應(yīng)方法 需要在父組件中使用子組件并在子組件標(biāo)簽上綁定對(duì)事件的監(jiān)聽(tīng)
演示代碼:
//父組件 <template> <div id="header"> <headerchild ref="headerChild"></headerchild> <button @click="getChild()">父組件獲取子組件的數(shù)據(jù)和方法</button> </div> </template> <script> import HeaderChild from './HeaderChild' export default { data () { return { title:'我是父組件的數(shù)據(jù)' } }, methods: { getChild (){ console.log(this.$refs.headerChild.name) }, run (){ console.log("我是父組件里面的方法") } }, components: { 'headerchild': HeaderChild } } </script> <style lang="sass" scoped> </style>
//子組件 <template> <div id="headerchild"> <button @click="getParent()">獲取父組件的數(shù)據(jù)和方法</button> </div> </template> <script> export default { data () { return { name:'我是子組件里面的數(shù)據(jù)' } }, methods:{ getParent(){ console.log(this.$parent.title) /*獲取整個(gè)父組件*/ this.$parent.run()/*獲取父組件的方法*/ } }, props:['title','run','home'] /*通過(guò)props接收父組件傳遞過(guò)來(lái)的數(shù)據(jù) */ } </script>
到此,相信大家對(duì)“Vue父組件和子組件之間數(shù)據(jù)傳遞和方法怎么調(diào)用”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún),關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。