Vue非父子组件传值
假如我们有两个子组件:Blog.vue 和News.vue 它们同为兄弟组件
我想实现News组件数据传递给Blog组件,
步骤如下:
1、创建一个js文件:VueEvent.js 代码如下:
import Vue from 'vue'; var VueEvent=new Vue(); export default VueEvent;
2、在New引入 上一步js文件,并且广播数据
代码如下:
<template> <div id="newapp"> <h1>我是新闻</h1> <button @click="emitblog()">广播数据</button> </div> </template> <script> import VueEvent from '../models/VueEvent.js'; export default { name:'mynews', data () { return { msg:'新闻传递过来的数据122' } } ,methods:{ emitblog() { alert(1); //广播数据 VueEvent.$emit("new-data",this.msg); } } } </script>
3、在blog里获取也引入步骤2js文件,并且获取数据
<template> <div id="homeapp"> <h1>我是blog</h1> </div> </template> <script> import VueEvent from '../models/VueEvent.js'; export default { name:'myblog', data () { return { msg:'blog' } } ,mounted() { //获取数据 VueEvent.$on("new-data",function(data){ alert(data); }); } } </script>