vue基础：非父子组件传值

vue基础：非父子组件传值

本文共用到四个文件：
根组件：App.vue
两个子组件：Home.vue,News.vue
js文件：eveemit.js
文章最后有所有文件

步骤：
1.新建一个js文件，引入vue并实例化，最后暴露这个实例
vueemit.js文件

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

2.在要广播的地方映入刚才定义的实例。
Home.vue向News.vue传，就要在Home.vue中广播
先引入

import vueevent from '../model/vueemit.js';

3.通过 vueevent.$emit(‘名称’,‘数据’)

methods:{emitnews(){vueevent.$emit('to-news',this.msg)} }

4.在接受的地方，监听广播
vueevent.$on(‘名称’,‘数据’)

mounted(){vueevent.$on('to-news',function(data){console.log(data);})}

效果图：

App.vue

<template><div id="app"><v-home/><v-news/>div>
template><script>
import Home from './components/Home.vue';
import News from './components/News.vue';
export default {data(){return{}},methods:{},components:{'v-home':Home,'v-news':News}
}
script><style>style>

Home.vue

<template><div id="home">我是home组件<br><button @click="emitnews()">给news传值button><br>div>
template><script>
//
import vueevent from '../model/vueemit.js';
export default {data(){return{msg:'我是一个home组件'}},methods:{emitnews(){vueevent.$emit('to-news',this.msg)} },mounted(){vueevent.$on('to-home',function(data){console.log(data);})}
}
script><style>style>

News.vue

<template><div id="news">我是News组件<br><button @click="eventhome()">给home传值button>div>
template><script>
import vueevent from '../model/vueemit.js';export default {data(){return{msg:'我是一个新闻组件'}},methods:{eventhome(){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;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！