这里有新鲜出炉的vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要为大家详细介绍了Vue非父子组件通信的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求。组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信。前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有下面的几句
具体如何去实现却没有很详细的说明,于是自己试着进行了实现。先看下简单的通信效果:
就是点击了一个组件,另一个组件的数字递加。
html如下:
- <div id="app">
- <component-a></component-a>
- <component-b></component-b>
- </div>
再来看一下如何实现每一个组件:
- var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转
- Vue.component('component-a',{
- template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件incrementB ,因为点击A需要增加B
- data () {
- return {
- masgA : 0
- }
- },
- methods: {
- incrementB: function () { //增加B的事件
- bus.$emit('incrementB') //中转站bus 触发incrementB事件
- }
- },
- mounted: function () {
- var _this = this
- bus.$on('incrementA',function(){ //中转站bus自定义increamentA事件用来增加msgA,这个事件最终由组件B进行触发
- _this.masgA ++
- })
- //bus.$on('incrementA',()=>{ //这里也可以用箭头函数,就不会有_this这个变量了,因为箭头函数不会改变this指向
- //this.masgA ++
- //})
- }
- })
从上面的代码可以看出真正的改变方法是通过bus里注册监听事件来实现的,同理代component-b也是一样
- Vue.component('component-b',{
- template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
- data () {
- return {
- masgB : 0
- }
- },
- methods: {
- incrementA: function () {
- bus.$emit('incrementA')
- }
- },
- mounted: function(){
- bus.$on('incrementB',() => {
- this.masgB ++
- })
- }
- })
完整代码如下,可直接复制运行
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>非父子组件通信</title>
- </head>
- <body>
- <div id="app">
- <component-a></component-a>
- <component-b></component-b>
- </div>
- <script src="https://unpkg.com/vue/dist/vue.js"></script>
- </body>
- <script>
- var bus = new Vue() //首先建立一个空的Vue实例作为事件的中转
- Vue.component('component-a',{
- template: `<div><button @click="incrementB">{{masgA}}</button></div>`, //添加点击事件
- data () {
- return {
- masgA : 0
- }
- },
- methods: {
- incrementB: function () {
- bus.$emit('incrementB')
- }
- },
- mounted: function () {
- var _this = this
- bus.$on('incrementA',function(){
- _this.masgA ++
- })
- bus.$on('incrementA',()=>{
- this.masgA ++
- })
- }
- })
- Vue.component('component-b',{
- template: `<div><button @click="incrementA">{{masgB}}</button></div>`,
- data () {
- return {
- masgB : 0
- }
- },
- methods: {
- incrementA: function () {
- bus.$emit('incrementA')
- }
- },
- mounted: function(){
- bus.$on('incrementB',() => {
- this.masgB ++
- })
- }
- })
- var vm = new Vue({
- el: "#app"
- })
- </script>
同时也可以看出这么做仅有两个组件就有些麻烦,事件的流向不是很清晰,所以在出现复杂的场景时需要使用VueX进行管理。
来源: http://www.phperz.com/article/17/0831/338729.html