Vue組件通信深入分析
一、組件間的通信方式分類
- 父子組件之間的通信;
- 兄弟組件之間的通信;
- 祖孫與后代組件之間的通信;
- 非關(guān)系組件之間的通信。
二、props傳遞數(shù)據(jù)
適用場景:父組件傳遞數(shù)據(jù)給子組件;
- 子組件設(shè)置props屬性,定義接收父組件傳遞過來的參數(shù);
- 父組件在使用子組件標(biāo)簽中通過字面量來傳遞值
Person.vue
<template> <div> Person <Student1 name="jack" age="18"></Student1> </div> </template> <script> import Student1 from './Student1' export default { name: 'Person', components: { Student1, }, </script>
Student1.vue
<template> <div> Student1 {{name}},{{age}} </div> </template> <script> export default { name: 'Student1', props: { name: String, age:Number, } } </script>
效果
三、$emit 觸發(fā)自定義事件
- 適用場景:子組件傳遞數(shù)據(jù)給父組件
- 子組件通過
$emit
觸發(fā)自定義事件,$emit
第二個參數(shù)為傳遞的數(shù)值; - 父組件綁定監(jiān)聽器獲取到子組件傳遞過來的參數(shù)。
Student1.vue
<template> <div> Student1 <button @click="giveData()">點(diǎn)我傳遞數(shù)據(jù)</button> </div> </template> <script> export default { name: 'Student1', methods: { giveData() { this.$emit('add', '12345'); } }, } </script>
Person.vue
<template> <div> Person <Student1 @add="cartAdd($event)"></Student1> </div> </template> <script> import Student1 from './Student1' export default { name: 'Person', components: { Student1, }, methods: { cartAdd(event) { console.log(event); } }, } </script>
四、ref標(biāo)記
- 使用場景:子組件傳遞數(shù)據(jù)給父組件
- 父組件在使用子組件的時候設(shè)置ref
- 父組件通過設(shè)置子組件ref來獲取數(shù)據(jù)
<template> <div> Person <Student2 ref="foo"></Student2> <button @click="getRef()">點(diǎn)擊獲取ref數(shù)據(jù)</button> </div> </template> <script> import Student2 from "./Student2"; export default { name: "Person", components: { Student2, }, methods: { getRef() { console.log(this.$refs.foo); }, }, }; </script>
效果
五、EventBus事件總線
- 使用場景:任意組件傳值
- 創(chuàng)建一個中央事件總線EventBus
- 兄弟組件通過
$emit
觸發(fā)自定義事件,$emit
第二個參數(shù)為傳遞的數(shù)值 - 另一個兄弟組件通過
$on
監(jiān)聽自定義事件
main.js
beforeCreate() { Vue.prototype.$bus = this }
Student2.vue
<template> <div> Student2 <button @click="getBus()">點(diǎn)我獲取全局事件總線數(shù)據(jù)</button> </div> </template> <script> export default { name: 'Student2', data() { return { name: 'fanafan', age:'17' } }, methods:{ getBus(){ this.$bus.$emit('bus',this.name) } } } </script>
Student1.vue
mounted() { this.$bus.$on('bus', (data) => { console.log(data) }) },
六、$parent 或 $root
使用方法類似全局事件總結(jié)
Vue.prototype.$parent = this
// 傳數(shù)據(jù) this.$parent.$emit('parent',this.age) //接數(shù)據(jù) this.$parent.$on('parent', (data) => { console.log(data); })
七、vuex
- 使用場景:復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞
- Vuex是一個用來存儲共享變量的容器
- state:用來存放共享遍歷的地方;
- getter:可以增加一個getter派生狀態(tài),用來獲得共享變量的值;
- mutations:用來存放修改state的方法;
- actions也是用來存放修改state的方法,不過action是在mutations的基礎(chǔ)上進(jìn)行的。常用來做一些異步操作。
八、總結(jié)
- 父——>子:props;
- 子——>父:$emit,ref;
- 兄弟——>兄弟,任意——>任意:$bus。
- 復(fù)雜關(guān)系:vuex。
到此這篇關(guān)于Vue組件通信深入分析的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
elementUI實(shí)現(xiàn)級聯(lián)選擇器
這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級聯(lián)選擇器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed
這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下2022-06-06Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10Vue如何整合mavon-editor編輯器(markdown編輯和預(yù)覽)
這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預(yù)覽)的相關(guān)知識,mavon-editor是目前比較主流的markdown編輯器,重點(diǎn)介紹它的使用方法,需要的朋友可以參考下2022-10-10