vue非父子组件传值完整

非父子组件间的传值

常一个应用会以一棵嵌套的组件树的形式来组织：将一个大组件进行拆分

下图这种情况的组件间传值（父子组件间传值）

方法：父组件通过 Props 向子组件传值，子组件通过事件触发向父组件传值

下图这种情况的组件间传值（父子组件间隔代传值，也是非父子组件间传值）

方法：将第二层作为中间层，父组件（1）通过 Props 向子组件（2）传值，父组件（2）通过 Props 向子组件（3）传值，

子组件（3）通过事件触发向父组件（2）传值； 子组件（2）通过事件触发向父组件（1）传值；

下图这种情况的组件间传值（非父子组件间传值）

参照上面的方法，也可以将第1层、第2层作为中间层来实现传值，原理上可行；但极其复杂...

解决非父子组件间传值方法：1.Vue 官方提供的 Vuex 框架    2.发布订阅模式（总线机制 / Bus / 观察者模式）

一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码

要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Home.vue
│ │ └── News.vue
│ └── model
│ └── VueEvent.js

App.vue

<template>
  <div id="app">
    <v-home></v-home>
    <hr>
    <br>
    <v-news></v-news>
  </div>
</template>
<script>
import Home from './components/Home.vue';
import News from './components/News.vue';


export default {
name: "app",
  data() {
    return {
      msg:'hello vue world!',     
    };
  },
  components:{
    'v-home':Home,
    'v-news':News
  },
};
</script>
<style>
</style>

Home.vue

<template>
    <!-- all content need in root-->
    <div id="home">      
        {{msg}} 
        <br>
        <button @click="emitNews()">send message to News Page </button>
    </div>
</template>

<script>

import VueEvent from '../model/VueEvent.js'

export default {
    data(){
        return {
            msg:'i am home component!'
        }
    },
    methods:{
        emitNews(){
            VueEvent.$emit('to-news', this.msg)
        }
    },
    mounted(){
        VueEvent.$on('to-home', function(data){
            console.log(data)
        })
    }
}
</script>

<style>

</style>

News.vue

<template>
    <!-- all content need in root-->
    <div id="news">      
        {{msg}} 
        <br>
        <button @click="emitHome()">send message to Home Page </button>
    </div>
</template>


<script>

import VueEvent from '../model/VueEvent.js'

export default {
    data(){
        return {
            msg:'i am news component!'
        }
    },
    methods:{
        emitHome(){
            VueEvent.$emit('to-home', this.msg)
        }
    },
    mounted(){
        VueEvent.$on('to-news', function(data){
            console.log(data)
        })
    }
}
</script>

<style>

</style>

VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

五 运行

npm run dev

image.png

六 总结

1Vue非父子组件传值
《1 创建js文件，引入vue，实例化vue，暴露这个实例

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

《2 在要广播的地方引入定义的实例

import VueEvent from '../model/VueEvent.js'

《3 通过VueEvent.$emit('名称', '数据')

VueEvent.$emit('to-news', this.msg)

《4 在接受数据的地方通过$on监听

export default {
    data(){
    },
    mounted(){
        VueEvent.$on('to-home', function(data){
            console.log(data)
        })
    }
}

七 参考

https://cn.vuejs.org/v2/guide/components-custom-events.html