vue中 關於$emit的用法（--父子組件傳值--平行組件之間this.$store.commit）

時間  2020-06-09
標籤 vue 關於 emit 用法 父子 組件 平行 之間 store.commit store commit 简体版
原文   原文鏈接

組件是 vue.js 最強大的功能之一，而組件實例的做用域是相互獨立的，這就意味着不一樣組件之間的數據沒法相互引用。那麼組件間如何通訊，也就成爲了vue中重點知識了。這篇文章將會經過props、$ref和 $emit 這幾個知識點，來說解如何實現父子組件間通訊。
html

在說如何實現通訊以前，咱們先來建兩個組件father.vue和child.vue做爲示例的基礎。前端

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//父組件
 
<template>
  <div>
   <h1>我是父組件！</h1>
   <child></child>
  </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {Child},
}
</script>
?
1
2
3
4
5
6
7
8
//子組件
 
<template>
  <h3>我是子組件！</h3>
</template>
 
<script>
</script>

這兩部分的代碼都很清晰明瞭，父組件經過import的方式導入子組件，並在components屬性中註冊，而後子組件就能夠用標籤<child>的形式嵌進父組件了。運行father.vue後的效果是這樣的：vue

示例效果一
vuex

1.經過prop實現通訊npm

子組件的props選項可以接收來自父組件數據。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分爲兩種：json

（1）靜態傳遞api

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 父組件 -->
 
<template>
  <div>
   <h1>我是父組件！</h1>
   <child message= "我是子組件一！" ></child> //經過自定義屬性傳遞數據
  </div>
</template>
 
<script>
import Child from '../components/child.vue'
export default {
  components: {Child},
}
</script>
?
1
2
3
4
5
6
7
8
9
10
<!-- 子組件 -->
 
<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
   props: [ 'message' ]  //聲明一個自定義的屬性
  }
</script>

（2）動態傳遞app

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 父組件 -->
 
<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>
?
1
2
3
4
5
6
7
8
9
10
<!-- 子組件 -->
 
<template>
  <h3>{{message}}</h3>
</template>
<script>
  export default {
   props: [ 'message' ]
  }
</script>

出來的效果是這樣的：

示例效果二

2.經過$ref 實現通訊

對於ref官方的解釋是：ref 是被用來給元素或子組件註冊引用信息的。引用信息將會註冊在父組件的 $refs 對象上。

看不懂對吧？很正常，我也看不懂。那應該怎麼理解？看看個人解釋：

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

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 父組件 -->
 
<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>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 子組件 -->
 
<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咱們獲取了什麼：

console.log

最後的效果是這樣的：

示例效果三

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

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

3.經過$emit 實現通訊

上面兩種示例主要都是父組件向子組件通訊，而經過$emit 實現子組件向父組件通訊。

對於$emit官網上也是解釋得很朦朧，我按我本身的理解是這樣的:

?
1
vm.$emit( event, arg )

$emit 綁定一個自定義事件event，當這個這個語句被執行到的時候，就會將參數arg傳遞給父組件，父組件經過@event監聽並接收參數。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
?
1
2
3
4
5
6
7
8
9
10
<template>
  <h3>我是子組件！</h3>
</template>
<script>
  export default {
   mounted: function () {
    this .$emit( 'getMessage' , '我是父組件！' )
   }
  }
</script>

示例效果三

 

https://blog.csdn.net/jingtian678/article/details/81481075  ：

Vue的項目中，若是項目簡單， 父子組件之間的數據傳遞可使用  props 或者 $emit 等方式 進行傳遞

可是若是是大中型項目中，不少時候都須要在不相關的平行組件之間傳遞數據，而且不少數據須要多個組件循環使用。這時候再使用上面的方法會讓項目代碼變得冗長，而且不利於組件的複用，提升了耦合度。

Vue 的狀態管理工具 Vuex 完美的解決了這個問題。

看了下vuex的官網，以爲不是很好理解，有的時候咱們只是須要動態的從一個組件中獲取數據（官網稱爲「組件層級」：是個獨立的控件，做用範圍只在組件以內）而後想放到一個被官網稱做「應用層級」（在項目的任意地方均可以隨時獲取和動態的修改，在修改以後，vue會爲你的整個項目作更新）的地方。這是我最初來學習vue的緣由，我並不想作一個前端數據結構庫。。。

下面看看我一步一步的小例子

首先安裝vuex     目前公司項目已經被我從vue1.0遷移到vue2.0，下載並安裝vue  

npm install vuex --save

而後在index.html同級新建文件夾store，在文件夾內新建index.js文件，這個文件咱們用來組裝模塊並導出 store 的文件

 

【1、獲取store中的數據】

複製代碼

  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3.  
  4. // 告訴 vue 「使用」 vuex
  5. Vue.use(Vuex)
  6.  
  7. // 建立一個對象來保存應用啓動時的初始狀態
  8. // 須要維護的狀態
  9. const store = new Vuex.Store({
  10. state: {
  11. // 放置初始狀態 app啓動的時候的全局的初始值
  12. bankInf: {"name":"我是vuex的第一個數據","id":100,"bankName":"中國銀行"}
  13. }
  14. })
  15. // 整合初始狀態和變動函數，咱們就獲得了咱們所需的 store
  16. // 至此，這個 store 就能夠鏈接到咱們的應用中
  17. export default store

複製代碼

在vue根文件中註冊store，這樣全部的組件均可以使用store中的數據了

個人項目文件結構：

 

在main.js文件中註冊store

複製代碼

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import store from './../store/index'
  5.  
  6. /* eslint-disable no-new */
  7. new Vue({
  8. el: '#app',
  9. router,
  10. store,
  11. template: ' <App/>',
  12. components: { App }
  13. })

複製代碼

這樣簡單的第一步就完成了，你能夠再任意組件中使用store中的數據，使用方法也很簡單，就是使用計算屬性返回store中的數據到一個新屬性上，而後在你模板中則可使用這個屬性值了：

任意組件中：

複製代碼

  1. export default {
  2. ...
  3. computed: {
  4. bankName() {
  5. return this.$store.state.bankInf.bankName;
  6. }
  7. },
  8. ...
  9. }

複製代碼

在模板中能夠直接使用bankName這個屬性了，也就是store中的中國銀行

 

【2、在組件中修改store中的狀態 】

在任意組件中添加html模板

  1. <div class="bank">
  2. <list-header :headerData="bankName"></list-header>
  3. 04銀行詳情頁面
  4. <input name="" v-model="textValue">
  5. <button type="button" name="獲取數據" @click="newBankName"></button>
  6. </div>

而後組件中提交mutation

複製代碼

  1. export default {
  2. ...
  3. computed: {
  4. bankName() {
  5. return this.$store.state.bankInf.bankName;
  6. }
  7. },
  8. methods: {
  9. newBankName: function() {
  10. this.$store.commit('newBankName', this.textValue)
  11. }
  12. }
  13. ...
  14. }

複製代碼

在store中的index.js中添加mutations：

複製代碼

  1. const store = new Vuex.Store({
  2. state: {
  3. // 放置初始狀態 app啓動的時候的全局的初始值（//定義狀態）
  4. bankInf: {"name":"我是vuex的第一個數據","id":100,"bankName":"中國銀行"},
  5. count:0
  6. },
  7. mutations: {
  8. newBankName(state,msg) {
  9. state.bankInf.bankName = msg;
  10. }
  11. }
  12. })

複製代碼

這樣你發現，在點擊提交按鈕的時候，頁面已經顯示你修改的數據了，而且全部複用這個組件的地方的數據全都被vue更新了；

 

若是在使用中發現報錯this.$store.commit is not a function ，請打開你項目的配置文件package.json，查看你正在使用的vuex的版本，我正在使用的是vuex2.0,

若是想刪除舊版本的vuex並安裝新版本的vuex請使用

npm rm vuex --save

而後安裝最新的vuex

npm install vuex --save

便可解決這個錯誤，或者是查看vuex官網api修改提交mutation的語句

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程