Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件
组件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中独立组件之间数据交互的更多相关文章
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- 8.【nuxt起步】-vue组件之间数据交互
那么现在问题来了,我现在是在index.vue获取了服务端的数据,怎么传值到maincontent.vue?当然你也可以把获取数据放在maincontent.vue,但假如有些数据同时在header, ...
- Vue组件之间数据交互与通信
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 一.父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传 ...
- vue中父组件传数据给子组件
父组件: <template> <parent> <child :list="list"></child> //在这里绑定list对 ...
- 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- vue 组件之间数据传递(七)
1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sex ...
随机推荐
- c#中debug和release版本的区别
1 debug版本称为调试版本,包含各种调试信息,以为开发人员提供强大的应用程序调试能力,其没有做任何优化,速度慢. 2 release版本称为发布版本,不保存调试信息,但是做了各种的优化,体积小,运 ...
- codeforces 540 C Ice Cave【BFS】
题意:给出一个n*m的矩阵,“.”代表完整的冰,“X”代表破碎的冰,现在为了前进,需要掉下去一层,唯一的方法就是从破碎的冰上面掉下去 然后给出起点还有终点,问能否可达 即为到达终点的时候,终点必须是破 ...
- 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 ...
- 守护、互斥锁、IPC和生产者消费者模型
守护进程 主进程创建守护进程 其一:守护进程会在主进程代码执行结束后就终止 其二:守护进程内无法再开启子进程,否则抛出异常:AssertionError: daemonic processes are ...
- Java web application——Listener
应用程序事件提供ServletContext和HttpSession以及ServletRequest对象状态更改的通知,用户编写响应状态更改的事件监听器类,并配置和部署他们.Servlet容器会调用事 ...
- Android 查看CPU及内存
借助getprop.dumpsys来了解一些系统相关信息. 一.getprop adb shell cat /system/build.prop 文件中存放的是用于启动系统时需要的配置文件,通常可以通 ...
- XML和Schema命名空间详解
来源:https://blog.csdn.net/wanghuan203/article/details/9204337 XML和Schema具有无关平台,技术厂商,简单,规范统一等特点,极具开放性, ...
- BNUOJ 4049 四叉树
四叉树 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld Java class name: Ma ...
- 数据迁移工具kettle简单上手
近期做了不少数据迁移工作,无一例外都是kettle做的,对于这些工具,我认为.够用就好,不用做特别多的研究(当然.除非你是这款工具的忠实粉丝,我相信这种没几个).kettle也不例外.在我看来就是不同 ...
- POJ 2826 An Easy Problem!(简单数论)
Description Have you heard the fact "The base of every normal number system is 10" ? Of co ...