您好,登錄后才能下訂單哦!
這篇文章給大家介紹vue中實(shí)現(xiàn)組件間通信的方式有哪些,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
方法一、 props / $emit
父組件A通過(guò)props的方式向子組件B傳遞,B to A 通過(guò)在 B 組件中 $emit, A 組件中 v-on 的方式實(shí)現(xiàn)。
1.父組件向子組件傳值
接下來(lái)我們通過(guò)一個(gè)例子,說(shuō)明父組件如何向子組件傳遞值:在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù) users:["Henry","Bucky","Emily"]
//App.vue父組件 <template> <div id="app"> <users v-bind:users="users"></users>//前者自定義名稱(chēng)便于子組件調(diào)用,后者要傳遞數(shù)據(jù)名 </div> </template> <script> import Users from "./components/Users" export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users } } //users子組件 <template> <div class="hello"> <ul> <li v-for="user in users">{{user}}</li>//遍歷傳遞過(guò)來(lái)的值,然后呈現(xiàn)到頁(yè)面 </ul> </div> </template> <script> export default { name: 'HelloWorld', props:{ users:{ //這個(gè)就是父組件中子標(biāo)簽自定義名字 type:Array, required:true } } } </script>
總結(jié):父組件通過(guò)props向下傳遞數(shù)據(jù)給子組件。注:組件中的數(shù)據(jù)共有三種形式:data、props、computed
2.子組件向父組件傳值(通過(guò)事件形式)
接下來(lái)我們通過(guò)一個(gè)例子,說(shuō)明子組件如何向父組件傳遞值:當(dāng)我們點(diǎn)擊“Vue.js Demo”后,子組件向父組件傳遞值,文字由原來(lái)的“傳遞的是一個(gè)值”變成“子向父組件傳值”,實(shí)現(xiàn)子組件向父組件值的傳遞。
// 子組件 <template> <header> <h2 @click="changeTitle">{{title}}</h2>//綁定一個(gè)點(diǎn)擊事件 </header> </template> <script> export default { name: 'app-header', data() { return { title:"Vue.js Demo" } }, methods:{ changeTitle() { this.$emit("titleChanged","子向父組件傳值");//自定義事件 傳遞值“子向父組件傳值” } } } </script> // 父組件 <template> <div id="app"> <app-header v-on:titleChanged="updateTitle" ></app-header>//與子組件titleChanged自定義事件保持一致 // updateTitle($event)接受傳遞過(guò)來(lái)的文字 <h3>{{title}}</h3> </div> </template> <script> import Header from "./components/Header" export default { name: 'App', data(){ return{ title:"傳遞的是一個(gè)值" } }, methods:{ updateTitle(e){ //聲明這個(gè)函數(shù) this.title = e; } }, components:{ "app-header":Header, } } </script>
總結(jié):子組件通過(guò)events給父組件發(fā)送消息,實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。
方法二、 $emit / $on
這種方法通過(guò)一個(gè)空的Vue實(shí)例作為中央事件總線(事件中心),用它來(lái)觸發(fā)事件和監(jiān)聽(tīng)事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信,包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí),可以選擇更好的狀態(tài)管理解決方案vuex 。
1.具體實(shí)現(xiàn)方式:
var Event=new Vue(); Event.$emit(事件名,數(shù)據(jù)); Event.$on(事件名,data => {});
2.舉個(gè)例子:兄弟組件有三個(gè),分別是A、B、C,C組件如何獲取A或者B組件的數(shù)據(jù)
<div id="itany"> <my-a></my-a> <my-b></my-b> <my-c></my-c> </div> <template id="a"> <div> <h4>A組件:{{name}}</h4> <button @click="send">將數(shù)據(jù)發(fā)送給C組件</button> </div> </template> <template id="b"> <div> <h4>B組件:{{age}}</h4> <button @click="send">將數(shù)組發(fā)送給C組件</button> </div> </template> <template id="c"> <div> <h4>C組件:{{name}},{{age}}</h4> </div> </template> <script> var Event = new Vue();//定義一個(gè)空的Vue實(shí)例 var A = { template: '#a', data() { return { name: 'tom' } }, methods: { send() { Event.$emit('data-a', this.name); } } } var B = { template: '#b', data() { return { age: 20 } }, methods: { send() { Event.$emit('data-b', this.age); } } } var C = { template: '#c', data() { return { name: '', age: "" } }, mounted() {//在模板編譯完成后執(zhí)行 Event.$on('data-a',name => { this.name = name;//箭頭函數(shù)內(nèi)部不會(huì)產(chǎn)生新的this,這邊如果不用=>,this指代Event }) Event.$on('data-b',age => { this.age = age; }) } } var vm = new Vue({ el: '#itany', components: { 'my-a': A, 'my-b': B, 'my-c': C } }); </script>
方法三、vuex
1.簡(jiǎn)要介紹Vuex原理
Vuex實(shí)現(xiàn)了一個(gè)單向數(shù)據(jù)流,在全局擁有一個(gè)State存放數(shù)據(jù),當(dāng)組件要更改State中的數(shù)據(jù)時(shí),必須通過(guò)Mutation進(jìn)行,Mutation同時(shí)提供了訂閱者模式供外部插件調(diào)用獲取State數(shù)據(jù)的更新。而當(dāng)所有異步操作(常見(jiàn)于調(diào)用后端接口異步獲取更新數(shù)據(jù))或批量的同步操作需要走Action,但Action也是無(wú)法直接修改State的,還是需要通過(guò)Mutation來(lái)修改State的數(shù)據(jù)。最后,根據(jù)State的變化,渲染到視圖上。
2.簡(jiǎn)要介紹各模塊在流程中的功能:
Vue Components:Vue組件。HTML頁(yè)面上,負(fù)責(zé)接收用戶(hù)操作等交互行為,執(zhí)行dispatch方法觸發(fā)對(duì)應(yīng)action進(jìn)行回應(yīng)。
dispatch:操作行為觸發(fā)方法,是唯一能執(zhí)行action的方法。
actions: 操作行為處理模塊,由組件中的 $store.dispatch('action 名稱(chēng)', data1) 來(lái)觸發(fā)。然后由commit()來(lái)觸發(fā)mutation的調(diào)用 , 間接更新 state 。負(fù)責(zé)處理Vue Components接收到的所有交互行為。包含同步/異步操作,支持多個(gè)同名方法,按照注冊(cè)的順序依次觸發(fā)。向后臺(tái)API請(qǐng)求的操作就在這個(gè)模塊中進(jìn)行,包括觸發(fā)其他action以及提交mutation的操作。該模塊提供了Promise的封裝,以支持action的鏈?zhǔn)接|發(fā)。
commit:狀態(tài)改變提交操作方法。對(duì)mutation進(jìn)行提交,是唯一能執(zhí)行mutation的方法。
mutations: 狀態(tài)改變操作方法,由actions中的 commit('mutation 名稱(chēng)') 來(lái)觸發(fā) 。是Vuex修改state的唯一推薦方法。該方法只能進(jìn)行同步操作,且方法名只能全局唯一。操作之中會(huì)有一些hook暴露出來(lái),以進(jìn)行state的監(jiān)控等。
state:頁(yè)面狀態(tài)管理容器對(duì)象。集中存儲(chǔ)Vue components中data對(duì)象的零散數(shù)據(jù),全局唯一,以進(jìn)行統(tǒng)一的狀態(tài)管理。頁(yè)面顯示所需的數(shù)據(jù)從該對(duì)象中進(jìn)行讀取,利用Vue的細(xì)粒度數(shù)據(jù)響應(yīng)機(jī)制來(lái)進(jìn)行高效的狀態(tài)更新。
getters:state對(duì)象讀取方法。圖中沒(méi)有單獨(dú)列出該模塊,應(yīng)該被包含在了render中,Vue Components通過(guò)該方法讀取全局state對(duì)象。
3.Vuex與localStorage
vuex 是 vue 的狀態(tài)管理器,存儲(chǔ)的數(shù)據(jù)是響應(yīng)式的。但是并不會(huì)保存起來(lái),刷新之后就回到了初始狀態(tài), 具體做法應(yīng)該在vuex里數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面,刷新之后,如果localStorage里有保存的數(shù)據(jù),取出來(lái)再替換store里的state。
let defaultCity = "上海" try { // 用戶(hù)關(guān)閉了本地存儲(chǔ)功能,此時(shí)在外層加個(gè)try...catch if (!defaultCity){ defaultCity = JSON.parse(window.localStorage.getItem('defaultCity')) } }catch(e){} export default new Vuex.Store({ state: { city: defaultCity }, mutations: { changeCity(state, city) { state.city = city try { window.localStorage.setItem('defaultCity', JSON.stringify(state.city)); // 數(shù)據(jù)改變的時(shí)候把數(shù)據(jù)拷貝一份保存到localStorage里面 } catch (e) {} } } })
這里需要注意的是:由于vuex里,我們保存的狀態(tài),都是數(shù)組,而localStorage只支持字符串,所以需要用JSON轉(zhuǎn)換:
JSON.stringify(state.subscribeList); // array -> string JSON.parse(window.localStorage.getItem("subscribeList")); // string -> array
方法四、 $attrs / $listeners
1.簡(jiǎn)介
多級(jí)組件嵌套需要傳遞數(shù)據(jù)時(shí),通常使用的方法是通過(guò)vuex。但如果僅僅是傳遞數(shù)據(jù),而不做中間處理,使用 vuex 處理,未免有點(diǎn)大材小用。為此Vue2.4 版本提供了另一種方法, 當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí),這里會(huì)包含所有父作用域的綁定 (class 和 style 除外),并且可以通過(guò) v-bind="$attrs" 傳入內(nèi)部組件。通常配合 interitAttrs 選項(xiàng)一起使用 。
// demo.vue <template> <div> <child-com:foo="foo":boo="boo":coo="coo":doo="doo"></child-com> </div> </tempalte> <script> const childCom = ()=> import('./childCom1.vue') export default { data () { return { foo: 'Hello World!', boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' } }, components: { childCom } } </script> // childCom1.vue <template> <div> <p>foo: {{ foo }}</p> <p>attrs: {{ $attrs }}</p> <child-com2 v-bind="$attrs"></child-com2> </div> </template> <script> const childCom2 = ()=> import('./childCom2.vue') export default { props: ['foo'], // foo作為props屬性綁定 inheritAttrs: false, created () { console.log(this.$attrs) // { boo: 'Hello Javascript!', coo: 'Hello Vue', doo: 'Last' } } } </script> // childCom2.vue <template> <div> <p>boo: {{ boo }}</p> <p>attrs: {{ $attrs }}</p> <child-com3 v-bind="$attrs"></child-com3> </div> </template> <script> const childCom3 = ()=> import('./childCom3.vue') export default { props: ['boo'] // boo作為props屬性綁定 inheritAttrs: false, created () { console.log(this.$attrs) // { coo: 'Hello Vue', doo: 'Last' } } } </script>
$attrs 表示沒(méi)有繼承數(shù)據(jù)的對(duì)象,格式為{屬性名:屬性值}。Vue2.4提供了 $attrs , $listeners 來(lái)傳遞數(shù)據(jù)與事件,跨級(jí)組件之間的通訊變得更簡(jiǎn)單
方法五、provide/inject
1.簡(jiǎn)介
Vue2.2.0新增API,這對(duì)選項(xiàng)需要一起使用, 以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴(lài),不論組件層次有多深,并在起上下游關(guān)系成立的時(shí)間里始終生效 。一言而蔽之: 祖先組件中通過(guò)provider來(lái)提供變量,然后在子孫組件中通過(guò)inject來(lái)注入變量。
2.舉個(gè)例子
假設(shè)有兩個(gè)組件: A.vue 和 B.vue,B 是 A 的子組件
// A.vue export default { provide: { name: '浪里行舟' } } // B.vue export default { inject: ['name'], mounted () { console.log(this.name); // 浪里行舟 } }
可以看到,在 A.vue 里,我們?cè)O(shè)置了一個(gè) provide: name ,值為 浪里行舟,它的作用就是將 name 這個(gè)變量提供給它的所有子組件。而在 B.vue 中,通過(guò) inject 注入了從 A 組件中提供的 name 變量,那么在組件 B 中,就可以直接通過(guò) this.name 訪問(wèn)這個(gè)變量了,它的值也是 浪里行舟。這就是 provide / inject API 最核心的用法。
需要注意的是: provide 和 inject 綁定并不是可響應(yīng)的 。不過(guò),如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象,那么其對(duì)象的屬性還是可響應(yīng)的。 所以,上面 A.vue 的 name 如果改變了,B.vue 的 this.name 是不會(huì)改變的,仍然是 浪里行舟。
方法六、 $parent / $children 與 ref
ref :如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實(shí)例
$parent / $children :訪問(wèn)父 / 子實(shí)例
需要注意的是:這兩種都是直接得到組件實(shí)例,使用后可以直接調(diào)用組件的方法或訪問(wèn)數(shù)據(jù)。我們先來(lái)看個(gè)用 ref 來(lái)訪問(wèn)組件的例子:
// component-a 子組件 export default { data () { return { title: 'Vue.js' } }, methods: { sayHello () { window.alert('Hello'); } } } // 父組件 <template> <component-a ref="comA"></component-a> </template> <script> export default { mounted () { const comA = this.$refs.comA; console.log(comA.title); // Vue.js comA.sayHello(); // 彈窗 } } </script>
不過(guò), 這兩種方法的弊端是,無(wú)法在跨級(jí)或兄弟間通信 。
// parent.vue <component-a></component-a> <component-b></component-b> <component-b></component-b>
我們想在 component-a 中,訪問(wèn)到引用它的頁(yè)面中(這里就是 parent.vue)的兩個(gè) component-b 組件,那這種情況下,就得配置額外的插件或工具了,比如 Vuex 和 Bus 的解決方案。
總結(jié)
常見(jiàn)使用場(chǎng)景可以分為三類(lèi):
父子通信: 父向子傳遞數(shù)據(jù)是通過(guò) props,子向父是通過(guò) events( $emit );通過(guò)父鏈 / 子鏈也可以通信( $parent / $children );ref 也可以訪問(wèn)組件實(shí)例;provide / inject API。
兄弟通信: Bus;Vuex;
跨級(jí)通信: Bus;Vuex;provide / inject API、 $attrs/$listeners
關(guān)于vue中實(shí)現(xiàn)組件間通信的方式有哪些就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(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)容。