独立组件之间数据交互:通过自定义事件

组件A中的【数据】,传递给组件B

1.创建组件A,组件B
2.组件B在实例创建完成时就开始监听事件【等待接收数据】:钩子
3.组件A中触发事件,发送数据

注意:接收数据的函数,一定要绑定在生命周期创建钩子上(created:function(){})
1、引入相应的文件

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

2、Dom文件

<div id="app">
<comp-a></comp-a>
<comp-b></comp-b>
</div>

3、js的相关内容

 <script>
Vue.component("compA", {
template:"<button @click='test'>组件A中,触发事件</button>",
methods:{
test:function() {
bus.$emit("myevent", this.username);//$emit("事件名称",[参数列表])通过$emit在代码中触发一个事件
}
},
data:function() {
return {
username:"jerry"
}
}
});
Vue.component("compB", {
template:"<h2>{{ds}}</h2>",
created:function() {/*这是实例创建完成时自动调用的生命周期钩子*/
var that = this;
bus.$on("myevent", function(msg) {//通过$on("事件名称",function(参数列表){})来监听一个事件是否进行处理
// 接收到数据之后,就可以更新组件中使用的数据,然后展示到页面上
console.log("接收到其他组件传递的数据:" + msg);
that.ds = msg;
});
},
data:function() {
return {
ds:"hello"
}
}
}); /*定义一个消息分发中间件*/
var bus = new Vue(); var vm = new Vue({
el:"#app"
});
</script>

Vue中独立组件之间数据交互的更多相关文章

  1. vue 中父子组件之间的交互

    1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...

  2. vue中父子组件之间的传值、非父子组件之间的传值

    在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...

  3. 8.【nuxt起步】-vue组件之间数据交互

    那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...

  4. Vue组件之间数据交互与通信

    Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...

  5. vue中父组件传数据给子组件

    父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...

  6. 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  7. 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用

    vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  9. vue 组件之间数据传递(七)

    1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...

随机推荐

  1. c#中debug和release版本的区别

    1 debug版本称为调试版本,包含各种调试信息,以为开发人员提供强大的应用程序调试能力,其没有做任何优化,速度慢. 2 release版本称为发布版本,不保存调试信息,但是做了各种的优化,体积小,运 ...

  2. codeforces 540 C Ice Cave【BFS】

    题意:给出一个n*m的矩阵,“.”代表完整的冰,“X”代表破碎的冰,现在为了前进,需要掉下去一层,唯一的方法就是从破碎的冰上面掉下去 然后给出起点还有终点,问能否可达 即为到达终点的时候,终点必须是破 ...

  3. sql笔试题-1

    在oracle下sql:比较巧妙地是group by 部分 E from (select a.team,b.y from nba a,nba b ) c group by (c.y-rownum) o ...

  4. 守护、互斥锁、IPC和生产者消费者模型

    守护进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic processes are ...

  5. Java web application——Listener

    应用程序事件提供ServletContext和HttpSession以及ServletRequest对象状态更改的通知,用户编写响应状态更改的事件监听器类,并配置和部署他们.Servlet容器会调用事 ...

  6. Android 查看CPU及内存

    借助getprop.dumpsys来了解一些系统相关信息. 一.getprop adb shell cat /system/build.prop 文件中存放的是用于启动系统时需要的配置文件,通常可以通 ...

  7. XML和Schema命名空间详解

    来源:https://blog.csdn.net/wanghuan203/article/details/9204337 XML和Schema具有无关平台,技术厂商,简单,规范统一等特点,极具开放性, ...

  8. BNUOJ 4049 四叉树

    四叉树 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class name: Ma ...

  9. 数据迁移工具kettle简单上手

    近期做了不少数据迁移工作,无一例外都是kettle做的,对于这些工具,我认为.够用就好,不用做特别多的研究(当然.除非你是这款工具的忠实粉丝,我相信这种没几个).kettle也不例外.在我看来就是不同 ...

  10. POJ 2826 An Easy Problem!(简单数论)

    Description Have you heard the fact "The base of every normal number system is 10" ? Of co ...