Vue组件间常用的通信方式总结
在使用 vue-cli 创建的 vue 项目中进行组件间的通信,以下是三种常用的组件间通信的方式总结。
1、父组件向子组件传递数据----------------------------> 通过Prop
2、子组件向父组件发送消息---------------------------->使用 $emit
3、组件间与组件间通信----------------------------------->使用Vuex
父组件向子组件传递数据
$ vue init webpack vue-demo
首先通过Vue-cli命令创建一个webpack模板项目,为项目简单起见,这里在Install vue-router、insatll ESLint、install unit test都选择NO。
删除掉src/components目录下面的HelloWorld.vue组件,在该目录下新建一个Child.vue组件,现在的目录结构长这样。
准备工作完毕,接下来看一下 父组件利用props往子组件传输数据。
修改Child.vue组件:
用一个 props
选项将要传递的属性包含在该组件可接受的 prop 列表中,当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性,这里则传递了一个msg属性。
<template><div class="mychild"><h2>子组件</h2><p>{{msg}}</p></div>
</template><script>export default{props:["msg"],}
</script><style>
.mychild
{border:1px solid black;width:400px;
}
</style>
修改App.vue组件:
这里使用了 v-bind
来动态传递 prop,也就是说当parentMsg改变的时候,子组件对应的值也会改变。这里添加了一个按钮来改变parentMsg值,用于观察。
<template><div id="app"><button v-on:click="changeMsg">改变msg内容</button><child v-bind:msg="parentMsg"></child></div>
</template><script>
import Child from './components/Child'export default {name: 'App',data(){return {parentMsg:'original parent message'}},components: {Child},methods:{changeMsg:function(){console.log('1');this.parentMsg='parent message has changed!'}}
}
</script><style></style>
启动项目 :
$ npm run dev
运行可以看到父组件向子组件传递了一个数据,点击改点msg内容按钮,对应子组件的值也改变了。
注意:在利用props实现传值的过程中理论上是要实现单向传递,即父组件改变相关参数的值,子组件也相应变化,但是子组件对参数的改变不应该影响父组件。但是当props中接收的是父组件传递的引用类型(对象或者是数组)时,在子组件中对数据改变时,父组件中的数据也会相应的改变,因为两者是指向的同一地址内存。如果不想子组件的改变影响父组件可以利用深拷贝,将接受的数据进行深拷贝后在子组件中使用,而不直接操作接受的数据。深拷贝可以直接利用ES6中的obj=Object。assign({},myMessage)(在computed中定义),这样子组件的改动将不会影响到父组件。
子组件向父组件发送消息
Vue 实例提供了一个自定义事件的系统来解决这个问题。我们可以调用内建的 $emit
方法并传入事件的名字,来向父级组件触发一个事件,然后我们可以用 v-on
在父组件上监听这个事件,就像监听一个原生 DOM 事件一样。
同样用上面的这个项目,修改child.vue组件:
在点击button的时候,会使用$emit向父组件派发一个事件
<template><div class="mychild"><h2>子组件</h2><button v-on:click="sendMsgToParent">向父组件传值</button></div>
</template><script>export default{methods:{sendMsgToParent:function(){this.$emit('myevent',"some message from child!");}}}
</script><style>
.mychild
{border:1px solid black;width:400px;
}
</style>
修改App.vue:
在父级组件监听myevent这个事件,在事件处理函数中,值将会作为第一个参数传入这个方法。以此获取到子组件向父组件发送的消息。
<template><div id="app"><div>msg:{{msgFromChild}}</div><child v-on:myevent="getMsgFromChild"></child></div>
</template><script>
import Child from './components/Child'export default {name: 'App',data(){return{msgFromChild:''}},components: {Child},methods:{getMsgFromChild:function(data){this.msgFromChild=data;}}
}
</script><style></style>
启动项目 :
$ npm run dev
运行后点击按钮可以看到利用事件机制子组件向父组件传递了一个参数
注意: 当有组件嵌套时则需要利用该机制一层一层的触发到指定层,不然直接在顶层监听子组件的子组件的事件是监听不到的,需要先向父组件派发,父组件在向上层触发
使用Vuex让多个vue组件中共享状态实现组件通讯
Vuex是一个专为Vue开发的应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex特点:
- 状态存储是响应式:当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
- 不能随意修改Vuex的状态:改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
同样是上面这个项目,我们首先要安装Vuex
$ npm install vuex --save
接下来在src目录下面创建一个store.js文件,在src/components下面创建OtherChild.vue文件。现在的目录结构长这样:
修改main.js,引入store
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from './store'Vue.config.productionTip = false/* eslint-disable no-new */
new Vue({store,el: '#app',components: { App },template: '<App/>'
})
store.js:
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {someMsg:'some msg'},mutations: {change_msg(state, data){state.someMsg=data;}}
})
App.vue:
<template><div id="app"><Child></Child><OtherChild></OtherChild></div>
</template><script>
import Child from './components/Child';
import OtherChild from './components/OtherChild.vue';export default {name: 'App',components: {Child,OtherChild}
}
</script><style></style>
Child.vue:
<template><div class="mychild"><h3>子组件1</h3><div>{{msg}}</div><button v-on:click="changeState">子组件1改变状态</button></div>
</template><script>export default{computed: {// 返回store中的值msg() {return this.$store.state.someMsg;}},methods:{changeState:function(){console.log('1');this.$store.commit('change_msg','子组件1改变了msg');}}}
</script><style>
.mychild
{border:1px solid black;width:400px;
}
</style>
OtherChild.vue:
<template><div class="mychild"><h3>子组件2</h3><div>{{msg}}</div><button v-on:click="changeState">子组件2 改变状态</button></div>
</template><script>export default{computed: {// 返回store中的值msg() {return this.$store.state.someMsg;}},methods:{changeState:function(){this.$store.commit('change_msg','子组件2 改变了msg');}}}
</script><style>.mychild{border:1px solid black;width:400px;}
</style>
启动项目 :
$ npm run dev
运行后分别点击组件1下面的button和组件2下面的button。可以看到使用vuex让组件间的状态进行了集中的管理,而且Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
Vue组件间常用的通信方式总结相关推荐
- vue组件间常用的几种通信方式
第一种方式:props 这种通信方式适用与父向子传递数据 //父组件 <template><div class="father"><span>我 ...
- Vue 组件间通信方式:自定义事件
前言 前期分享的测试开发系列!Vue 组件间通信方式汇总,总有一款适合你( 5分钟教程-附项目实战案例 )中介绍了 3 种组件间的通信方法,分别是: props 全局事件总线 消息订阅与发布 今天给大 ...
- vue组件间通信方式
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用. vue组件间的几种通信方式:props.$emit/$on.vuex.$paraent ...
- vue组件间通信传递数据的四种方式(路由传参、父子组件传参、兄弟组件传参、深层次传参)
前言: vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的,对于一些刚入门的伙伴来说可能就有些迷茫,感觉方式有很多种,但是总结起来又不知道应该怎么说,在下面的文章中,我结合自己的开发过程中经常 ...
- vue组件间通信六种方式(完整版)
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示 ...
- Vue组件间通信的几种方式
引入 用vue可以是要组件复用的,而组件实例的作用域是相互独立,这意味着不同组件之间的数据无法互相引用 一般来说,组件之间可以有几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系 ...
- Vue 组件间通信几种方式(完整版)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是 ...
- Vue 组件间通信方法汇总
Vue 组件间通信方法汇总 ⭐️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案.文章整理一下父子组件.兄弟组件.祖先后代组件间 ...
- Vue 组件间的通讯
这一节我们一起看看 vue 中组件间的数据是如何传递的. 前面,我们已经初步建立了 vue 组件化的思想,知道如何创建组件.引入组件以及如何在组件里的一些功能.接下来,我们来学习怎么建立组件之间的连接 ...
最新文章
- 孙连伟 java_java(jsp)简单实现数据库学生信息的增删改查案例
- 案例:简单计算器|| 属性绑定||v-model指令的本质||样式绑定
- 手把手教你DIY最便宜的 arduino 温湿度计,详细图文视频教程
- stringreader_Java StringReader skip()方法与示例
- python 删除sheet_python操作excel
- Hibernate学习笔记--映射配置文件详解
- 对象与控件如何建立关联
- Python笔记 之 矩阵元素选取
- 解决ie浏览器兼容ES6语法问题
- 1995-2013年RSA大会历届主题回顾
- ​软考高项论文写作这些雷区,千万要避开
- Photoshop合成雪景天使美女照片
- MathType中如何实现上下两行公式“=”号对齐
- java高校实验室预约管理系统
- 验房师去哪找靠谱,验房项目以及验房整改建议,精装房验房项目、毛坯房验房项目
- 两个让Transformer网络变得更简单,更高效的方法
- 【收藏】C#面试题整理笔试篇(最全1000+道带答案)300道填空 + 300道选择 + 300道判断 + 70道读程序写结果和看程序填空 + 100道简答题
- IDE硬盘驱动器读写过程
- ubuntu 常见错误--Could not get lock /var/lib/dpkg/lock
- 简单验证 姓名,身份证,手机号码