Vue組件通訊方式記錄

時間  2019-11-07
標籤 vue 組件 通訊 方式 記錄 简体版
原文   原文鏈接

1、父組件向子組件傳值

組件是 vue.js 最強大的功能之一，而組件實例的做用域是相互獨立的，這就意味着不一樣組件之間的數據沒法相互引用。那麼組件間如何通訊，也就成爲了vue中重點知識了, 下面是我整理的組件之間傳值問題.javascript

1.經過props進行通訊

props是用於父組件向子組件傳遞數據信息（props是單向綁定的，即只能父組件向子組件傳遞，不能反向）html

（1）靜態傳遞

子組件經過props選項來聲明一個自定義的屬性，而後父組件就能夠在嵌套標籤的時候，經過這個屬性往子組件傳遞數據了。vue

<!-- 父組件 -->

<template>
  <div>
    <h1>我是父組件！</h1>
    <child message="我是子組件一！"></child>  //經過自定義屬性傳遞數據
  </div>
</template>

<script> import Child from '../components/child.vue' export default { components: {Child}, } </script>
複製代碼
<!-- 子組件 -->

<template>
  <h3>{{message}}</h3>
</template>
<script> export default { props: ['message'] //聲明一個自定義的屬性 } </script>
複製代碼

（2）動態傳遞java

咱們已經知道了能夠像上面那樣給 props 傳入一個靜態的值，可是咱們更多的狀況須要動態的數據。這時候就能夠用 v-bind 來實現。經過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態的字符串了，它能夠是一個表達式、布爾值、對象等等任何類型的值。vuex

<!-- 父組件 -->

<template>
  <div>
    <h1>我是父組件！</h1>
    <child message="我是子組件一！"></child> 

    <!-- 這是一個 JavaScript 表達式而不是一個字符串。-->
    <child v-bind:message="a+b"></child>

    <!-- 用一個變量進行動態賦值。-->
    <child v-bind:message="msg"></child>
  </div>
</template>

<script> import Child from '../components/child.vue' export default { components: {Child}, data() { return { a:'我是子組件二！', b:112233, msg: '我是子組件三！'+ Math.random() } } } </script>
複製代碼
<!-- 子組件 -->
<template>
  <h3>{{message}}</h3>
</template>
<script> export default { props: ['message'] } </script>
複製代碼

2.經過$ref 實現通訊

對於ref官方的解釋是：ref 是被用來給元素或子組件註冊引用信息的。引用信息將會註冊在父組件的 $refs 對象上。
看不懂對吧？很正常，我也看不懂。那應該怎麼理解？看看個人解釋：
後端

  • 若是ref用在子組件上，指向的是組件實例，能夠理解爲對子組件的索引，經過$ref可能獲取到在子組件裏定義的屬性和方法。
  • 若是ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，經過 $ref 可能獲取到該DOM 的屬性集合，輕鬆訪問到DOM元素，做用與JQ選擇器相似。

那如何經過$ref 實現通訊？下面我將上面prop實現的功能，用$ref實現一遍：數組

<!-- 父組件 -->

<template>
  <div>
    <h1>我是父組件！</h1>
    <child ref="msg"></child>
  </div>
</template>

<script> import Child from '../components/child.vue' export default { components: {Child}, mounted: function () { console.log( this.$refs.msg); this.$refs.msg.getMessage('我是子組件一！') } } </script>
複製代碼
<!-- 子組件 -->

<template>
  <h3>{{message}}</h3>
</template>
<script> export default { data(){ return{ message:'' } }, methods:{ getMessage(m){ this.message=m; } } } </script>
複製代碼

從上面的代碼咱們能夠發現，經過ref=‘msg’能夠將子組件child的實例指給$ref，而且經過.msg.getMessage（）調用到子組件的getMessage方法，將參數傳遞給子組件。下面是「 console.log( this.$refs.msg);」打印出來的內容，這可讓你們更加了解，究竟經過ref咱們獲取了什麼：app

這裏再補充一點就是，prop和$ref之間的區別：

  • prop 着重於數據的傳遞，它並不能調用子組件裏的屬性和方法。像建立文章組件時，自定義標題和內容這樣的使用場景，最適合使用prop。
  • $ref 着重於索引，主要用來調用子組件裏的屬性和方法，其實並不擅長數據傳遞。並且ref用在dom元素的時候，能使到選擇器的做用，這個功能比做爲索引更常有用到。

3.經過$emit 實現通訊

上面兩種示例主要都是父組件向子組件通訊，而經過$emit 實現子組件向父組件通訊。 對於$emit官網上也是解釋得很朦朧，我按我本身的理解是這樣的: vm.$emit( event, arg )
$emit 綁定一個自定義事件event，當這個這個語句被執行到的時候，就會將參數arg傳遞給父組件，父組件經過@event監聽並接收參數。dom

<!--父組件-->
<template>
  <div>
    <h1>{{title}}</h1>
    <child @getMessage="showMsg"></child>
  </div>
</template>

<script> import Child from '../components/child.vue' export default { components: {Child}, data(){ return{ title:'' } }, methods:{ showMsg(title){ this.title=title; } } } </script>

複製代碼
<!--子組件-->
<template>
  <div>
    <h1>{{title}}</h1>
    <child @getMessage="showMsg"></child>
  </div>
</template>

<script> import Child from '../components/child.vue' export default { components: {Child}, data(){ return{ title:'' } }, methods:{ showMsg(title){ this.title=title; } } } </script>
複製代碼

2、子組件向父組件傳遞數據和方法

vue是禁止子組件直接向父組件傳值的，因此只能經過觸發事件來達到目的.異步

1. 子組件向父組件傳遞數據

子組件定義一個自定義方法,方法中經過this.$emit('方法名',傳遞數據1,傳遞數據2)方式發送數據,父組件監聽自定義事件,當事件觸發時,執行函數,進行傳值 子組件 childC.vue

<!--子組件-->
<template>
  <div id="childC">
    <h3>我是子組件</h3>
    {{data}}
    <button @click="clickEvent">點擊傳值</button>
  </div>
</template>
<script> export default { data () { return { data: '子組件傳遞數據' } }, methods: { clickEvent () { this.$emit('sendValueToParent', this.data) } }, } </script>
複製代碼

父組件 app.vue

<!--父組件-->
<template>
  <div id="app">
    父組件數據:{{name}}
    <!-- 經過子組件定義的事件來接收-->
    <child-c @sendValueToParent="getValue"></child-c>
  </div>
</template>
<script> import childC from './childC' export default { name: 'app', data () { return { name: '父組件' } }, components: { childC }, methods: { getValue (data) { this.name = data } }, } </script>
複製代碼

2. 子組件向父組件傳遞方法

  1. 子組件定義方法
alert2 (){
    alert('這是子組件方法')
}
複製代碼
  1. 在父組件引用子組件標籤中添加標識符,rel是語法,childM是標識
<!--引用子組件的標籤-->
<child-c ref="childM"></child-c>
複製代碼
  1. 父組件定義一個方法,調用方法就是標識爲 childM 的子組件裏的 alert2 方法
fn1(){
    <!--childM: 在引用子組件標籤中自定義的標識-->
    <!--alert2(): 子組件中自定義方法的名稱-->
    this.$refs.childM.alert2()
}
複製代碼
  1. 在組建中調用父組件中定義的方法
<button @click="fn">調用</button>
複製代碼

3、兄弟組件通訊

方式1 : 藉助中央事件總線思想:

  1. 在外部新建一個js文件,取名Bug.js,可放在assets文件目錄下.
<!--新建 Vue 實例並導出-->
import Vue from 'vue'
export default new Vue()
複製代碼
  1. 在兩個組件的公共父組件中引入須要通訊的組件
  2. 兩個須要通訊的組件同時引入Bus.js文件
import Bus from './Bus'
複製代碼
  1. 傳遞數據的組件須要定義一個發送數據的方法,此處 sendMsg 是定義在此的方法,頁面點擊時觸發此函數,經過 $emit 發送一個 send 事件, send爲自定義事件名稱.
<template>
     <!--點擊傳遞數據-->
    <button @click="fn">點擊傳值</button>
 </template>
<script> import Bus from './Bus' export default { data () { return { msg:'數據' } }, methods: { fn(){ <!--Bus.$emit(事件名,數據);--> Bus.$emit('send',this.msg) } } } </script>

複製代碼
  1. 接受數據的組件在 data 中先聲明一個變量,在鉤子函數 created 中,經過Bus中央事件總線用 $on 監聽組件1中發送的 send事件,用一個帶參數的回調函數,接收傳過來的值,把值賦給data中的變量.
<template>
     {{value}}
 </template>
<script> import Bus from './Bus' export default { data () { return { value:'1111' } }, created() { <!-- Bus.$on(事件名,data => {});--> Bus.$on('send',data => { this.value = data }) } } </script>
複製代碼

方式2 : 方式1簡化版

  1. 省略外部的js文件,將總線放在 main.js 入口文件裏的 vue 實例中
new Vue({
    el: '#app',
    router,
    data:{
        Bus: new Vue()
    },
    template: '<App/>',
    components: { App }
})
複製代碼
  1. 在使用的時候,不須要引入外部文件，只須要在Bus前加this.$root，便可調用.
<!--傳遞數據的組件-->
methods: {
    sendMsg() {
        this.$root.Bus.$emit('send',this.msg);
    }
}
複製代碼
<!--接收數據的組件-->
created() {
    this.$root.Bus.$on('send',data=> {
        this.value = data
    })
}
複製代碼

4、vuex

1. 簡要理解 Vue 原理

Vuex 實現了一個單向數據流,在全局擁有一個 State 存放數據,當組件要更改 State 中的數據時, 必須經過 Mutation 進行, Mutation 同時提供了訂閱者模式供外部插件獲取 State 數據的更新.而當全部異步操做(常見於調用後端接口異步獲取更新數據)或批量的同步操做須要走 Action ,但 Action 也是沒法直接修改 State 的,仍是須要經過 Mutation 來修改 State 的數據.最後,根據 State 的變化,渲染到視圖上.

2. 簡要介紹各模塊在流程中的功能:

  • Vue Components: Vue 的組件.負責接收用戶操做等交互行爲,執行 dispatch 方法觸發對應的 action 進行迴應.
  • dispatch: 操做行爲觸發方法,是惟一能執行的 action 的方法.
  • actions: 操做行爲處理模塊,由組件中的 $store.dispatch('action 名稱', data1)來觸發,而後由 commit() 來觸發調用,間接更新 state.負責處理 Vue Components 接收到的全部交互行爲.包含同步/異步操做,支持多個同名方法,按照註冊的順序依次觸發.向後臺 API 請求的操做就在這個模塊中進行,包括觸發其餘 action 以及提交 mutation 的操做.該模塊提供了Promise 的封裝,以支持 action 的鏈式觸發.
  • commit: 狀態改變提交操做方法.對mutation 進行提交,是惟一能執行 mutation 的方法.
  • mutations 狀態改變操做方法,由 actions 中的 commit('mutation 名稱') 來觸發. 是Vuex修改 state 的惟一推薦方法.該方法只能進行同步操做,且方法名只能全局惟一.操做之中會有一些 hook 暴露出來,以進行 state 的監控等.
  • state: 頁面狀態管理容器對象.集中存儲 Vue components 中data 對象的零散數據，全局惟一，以進行統一的狀態管理。頁面顯示所需的數據從該對象中進行讀取，利用 Vue 的細粒度數據響應機制來進行高效的狀態更新。
  • getters: state 對象讀取方法. Vuex流程圖中沒有單獨列出該模塊,應該被包含在了 render 中, Vue Components 經過該方法讀取全局 state 對象.

3. Vuex 與 localStorage

vuex 是 vue 的狀態管理器，存儲的數據是響應式的。可是並不會保存起來，刷新以後就回到了初始狀態，具體作法應該在 vuex 裏數據改變的時候把數據拷貝一份保存到 localStorage 裏面，刷新以後，若是 localStorage 裏有保存的數據，取出來再替換 store 裏的 state。

let defaultCity = "上海"
try {   // 用戶關閉了本地存儲功能，此時在外層加個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));
      // 數據改變的時候把數據拷貝一份保存到localStorage裏面
      } catch (e) {}
    }
  }
})
複製代碼

這裏須要注意的是：因爲 vuex 裏，咱們保存的狀態，都是數組，而 localStorage 只支持字符串，因此須要用 JSON 轉換:

// array -> string
JSON.stringify(state.subscribeList); 
// string -> array
JSON.parse(window.localStorage.getItem("subscribeList"));    
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程