1. 組件之間的傳值通信

組件之間通訊分為三種: 父傳子、子傳父、兄弟組件之間的通訊

(1)props/$emit

• 父傳子：父組件通過import引入子組件，并注冊，在子組件標簽上添加要傳遞的屬性，子組 件通過props接收，接收有兩種形式一是通過數組形式[‘要接收的屬性’ ]，二是通過對象形式{ }
• 子傳父：父組件向子組件傳遞事件方法，子組件通過$emit觸發事件，回調給父組件

?

1.父組件向子組件傳值

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

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

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

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

接下來我們通過一個例子，說明子組件如何向父組件傳遞值：當我們點擊“Vue.js Demo”后，子組件向父組件傳遞值，文字由原來的“傳遞的是一個值”變成“子向父組件傳值”，實現子組件向父組件值的傳遞。

// 子組件 <template><header><h1 @click="changeTitle">{{title}}</h1>//綁定一個點擊事件</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:"傳遞的是一個值"}},methods:{updateTitle(e){ //聲明這個函數this.title = e;}},components:{"app-header":Header,} } </script>

總結：子組件通過events給父組件發送消息，實際上就是子組件把自己的數據發送到父組件。

(2)$eimt/$on

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

?具體實現方式：

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

(3)?$parent / $children與 ref

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

// 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,以允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，并在起上下游關系成立的時間里始終生效。
• 總而言之：祖先組件中通過provider來提供變量，然后在子孫組件中通過inject來注入變量。
• provide / inject API主要解決了跨級組件間的通信問題，不過它的使用場景，主要是子組件獲取上級組件的狀態，跨級組件間建立了一種主動提供與依賴注入的關系。

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

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

• 我們來看個例子：孫組件D、E和F獲取A組件傳遞過來的color值，并能實現數據響應式變化，即A組件的color變化后，組件D、E、F會跟著變（核心代碼如下：）

//A組件 <div><h1>A 組件</h1><button @click="() => changeColor()">改變color</button><ChildrenB /><ChildrenC /> </div> ...... // provide() {// return {// theme: {// color: this.color //這種方式綁定的數據并不是可響應的// } // 即A組件的color變化后，組件D、E、F不會跟著變// };// },// 方法二:使用2.6最新API Vue.observable 優化響應式 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: {//函數式組件取值不一樣default: () => ({})}} }; </script>

詳解原文請看：https://segmentfault.com/a/1190000019208626

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。