Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用
更新時間:2022年12月14日 16:24:35 投稿:yin
vue組件在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質(zhì),子向父的介質(zhì)是自定義事件,父向子的介質(zhì)是props中的屬性。
vue組件在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質(zhì),子向父的介質(zhì)是自定義事件,父向子的介質(zhì)是props中的屬性。
父組件向子組件傳值(子組件主動獲取父組件的數(shù)據(jù)和方法)
父組件import引用子組件 使用子組件時在子組件上添加一個v-bind屬性,并綁定上數(shù)據(jù) 在子組件中創(chuàng)建 props ,在props 中創(chuàng)建相同的屬性名,用來接收數(shù)據(jù) 把接收到的數(shù)據(jù)在子組件中使用
子組件向父組件傳值(父組件主動獲取子組件的數(shù)據(jù)和方法)
子組件中需要發(fā)出該自定義事件,可以是按鈕的點擊事件,也可以是其他方式 將需要傳的值放在 $emit 第二個參數(shù)的位置,這個參數(shù)會被傳給父組件中的響應方法 需要在父組件中使用子組件并在子組件標簽上綁定對事件的監(jiān)聽
演示代碼:
//父組件 <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) /*獲取整個父組件*/ this.$parent.run()/*獲取父組件的方法*/ } }, props:['title','run','home'] /*通過props接收父組件傳遞過來的數(shù)據(jù) */ } </script>
到此這篇關于Vue父組件和子組件之間數(shù)據(jù)傳遞和方法調(diào)用的文章就介紹到這了,更多相關Vue父組件和子組件互相傳值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
如何優(yōu)雅的在一臺vps(云主機)上面部署vue+mongodb+express項目
這篇文章主要介紹了如何優(yōu)雅的在一臺vps(云主機)上面部署vue+mongodb+express項目,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01vue3中使用reactive定義的變量響應式丟失問題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應式丟失問題的具體例子和解決方案,文章通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-06-06