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

组件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. 2018年湘潭大学程序设计竞赛 maze(bfs)

    链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...

  2. 微信小程序 获取数组长度

    wxml中直接 {{array.length}} js中 array.length 小程序调用API返回的数据全部都是异步的:所以前提是要确保array中的数据,是存在的

  3. unity 5.6.1 Oculus手柄输入问题

    unity文档中提到 轴的 ID 是5和6,但是测试后发现,ID是6和7,很坑 void Update () { if (Input.GetKeyDown(KeyCode.JoystickButton ...

  4. C# Expression 树转化为SQL与语句(二)--解决参数问题

    在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...

  5. Watcher详解 工作机制, Watcher客户端注册、Watcher 服务端注册

    Watcher详解.接口 在 ZooKeeper 中, 接口类 Watcher 用于表示一个标注你的事件处理器,其定义了事件通知相关的逻辑,包含 KeeperState 和 EventType 两个枚 ...

  6. ZooKeeper 特性

    ZooKeeper 拥有一个层次的命名空间.(like distributed)       注意:ZooKeeper 中不许使用相对路径.   一    ZooKeeper 数据模型         ...

  7. Windows改动cmd字符集

    在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...

  8. CO-PRIME(初探 莫比乌斯)NYOJ1066(经典)gcd(a,b)=1

    CO-PRIME 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描写叙述 This problem is so easy! Can you solve it? You are ...

  9. jfinal文件上传与下载

    import com.alibaba.fastjson.JSONObject; import com.jfinal.core.Controller; import com.jfinal.ext.kit ...

  10. 在Linux终端使用W3M浏览器下载文件

    在Linux终端使用W3M浏览器下载文件 W3M 是3个基于Linux系统命令行的WEB网站浏览工具(w3m/Links/Lynx) 对于需要验证cookie 和来源的页面,比如163的超大附件,直接 ...