1. 組件之間的傳值通信

組件之間通訊分為三種: 父?jìng)髯印⒆觽鞲浮⑿值芙M件之間的通訊

(1)props/$emit

• 父?jìng)髯?#xff1a;父組件通過import引入子組件，并注冊(cè)，在子組件標(biāo)簽上添加要傳遞的屬性，子組 件通過props接收，接收有兩種形式一是通過數(shù)組形式[‘要接收的屬性’ ]，二是通過對(duì)象形式{ }
• 子傳父：父組件向子組件傳遞事件方法，子組件通過$emit觸發(fā)事件，回調(diào)給父組件

?

1.父組件向子組件傳值

接下來我們通過一個(gè)例子，說明父組件如何向子組件傳遞值：在子組件Users.vue中如何獲取父組件App.vue中的數(shù)據(jù)?users:["Henry","Bucky","Emily"]

//App.vue父組件 <template><div id="app"><users v-bind:users="users"></users>//前者自定義名稱便于子組件調(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>//遍歷傳遞過來的值，然后呈現(xiàn)到頁面</ul></div> </template> <script> export default {name: 'HelloWorld',props:{users:{ //這個(gè)就是父組件中子標(biāo)簽自定義名字type:Array,required:true}} } </script>

總結(jié)：父組件通過props向下傳遞數(shù)據(jù)給子組件。注：組件中的數(shù)據(jù)共有三種形式：data、props、computed

2.子組件向父組件傳值（通過事件形式）

接下來我們通過一個(gè)例子，說明子組件如何向父組件傳遞值：當(dāng)我們點(diǎn)擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個(gè)值”變成“子向父組件傳值”，實(shí)現(xiàn)子組件向父組件值的傳遞。

// 子組件 <template><header><h1 @click="changeTitle">{{title}}</h1>//綁定一個(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)接受傳遞過來的文字<h2>{{title}}</h2></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é)：子組件通過events給父組件發(fā)送消息，實(shí)際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。

(2)$eimt/$on

• 這種方法通過一個(gè)空的Vue實(shí)例作為中央事件總線（事件中心），用它來觸發(fā)事件和監(jiān)聽事件,巧妙而輕量地實(shí)現(xiàn)了任何組件間的通信，包括父子、兄弟、跨級(jí)。當(dāng)我們的項(xiàng)目比較大時(shí)，可以選擇更好的狀態(tài)管理解決方案vuex。。

?具體實(shí)現(xiàn)方式：

var Event=new Vue();Event.$emit(事件名,數(shù)據(jù));Event.$on(事件名,data => {}); // 假設(shè)兄弟組件有三個(gè)，分別是A、B、C組件，C組件如何獲取A或者B組件的數(shù)據(jù) // 組件A、B通過Event.$emit(事件名,數(shù)據(jù))將數(shù)據(jù)傳遞，組件C通過 Event.$on(事件名,data => {})接受

(3)?$parent / $children與 ref

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例
• $parent / $children：訪問父 / 子實(shí)例
• 需要注意的是：這兩種都是直接得到組件實(shí)例，使用后可以直接調(diào)用組件的方法或訪問數(shù)據(jù)。
• $parent ：訪問父實(shí)例，如果當(dāng)前實(shí)例有的話。
• $children:當(dāng)前實(shí)例的直接子組件。需要注意 $children并不保證順序，也不是響應(yīng)式的。如果你發(fā)現(xiàn)自己正在嘗試使用 $children來進(jìn)行數(shù)據(jù)綁定，考慮使用一個(gè)數(shù)組配合 v-for 來生成子組件，并且使用 Array 作為真正的來源。
• 這兩種方法的弊端是，無法在跨級(jí)或兄弟間通信。

// 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.jscomA.sayHello(); // 彈窗}} </script>

(4)provide/inject

• provide/inject:vue2.2.0 新增API,以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。
• 總而言之：祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量。
• provide / inject API主要解決了跨級(jí)組件間的通信問題，不過它的使用場(chǎng)景，主要是子組件獲取上級(jí)組件的狀態(tài)，跨級(jí)組件間建立了一種主動(dòng)提供與依賴注入的關(guān)系。

// A.vue export default {provide: {name: 'nora'} } /**************************************/ // B.vue export default {inject: ['name'],mounted () {console.log(this.name); // nora} }

• 需要注意的是：provide 和 inject 綁定并不是可響應(yīng)的。這是刻意為之的。然而，如果你傳入了一個(gè)可監(jiān)聽的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的----vue官方文檔
  provide與inject 怎么實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式?
  使用2.6最新API Vue.observable 優(yōu)化響應(yīng)式 provide(推薦)

• 我們來看個(gè)例子：孫組件D、E和F獲取A組件傳遞過來的color值，并能實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式變化，即A組件的color變化后，組件D、E、F會(huì)跟著變（核心代碼如下：）

//A組件 <div><h1>A 組件</h1><button @click="() => changeColor()">改變color</button><ChildrenB /><ChildrenC /> </div> ...... // provide() {// return {// theme: {// color: this.color //這種方式綁定的數(shù)據(jù)并不是可響應(yīng)的// } // 即A組件的color變化后，組件D、E、F不會(huì)跟著變// };// },// 方法二:使用2.6最新API Vue.observable 優(yōu)化響應(yīng)式 provide provide() {this.theme = Vue.observable({color: "blue"});return {theme: this.theme};},methods: {changeColor(color) {if (color) {this.theme.color = color;} else {this.theme.color = this.theme.color === "blue" ? "red" : "blue";}}} /******************************************************************/ // F 組件 <template functional><div class="border2"><h3 :style="{ color: injections.theme.color }">F 組件</h3></div> </template> <script> export default {inject: {theme: {//函數(shù)式組件取值不一樣default: () => ({})}} }; </script>

詳解原文請(qǐng)看：https://segmentfault.com/a/1190000019208626

總結(jié)

以上是生活随笔為你收集整理的Vue组件间通信方式(详解)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。