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教程