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 ...
随机推荐
- 2018年湘潭大学程序设计竞赛 maze(bfs)
链接:https://www.nowcoder.com/acm/contest/105/F来源:牛客网 有q个单向传送阵,每个传送阵各有一个入口和一个出口,入口和出口都在迷宫的格子里,当走到或被传送到 ...
- 微信小程序 获取数组长度
wxml中直接 {{array.length}} js中 array.length 小程序调用API返回的数据全部都是异步的:所以前提是要确保array中的数据,是存在的
- unity 5.6.1 Oculus手柄输入问题
unity文档中提到 轴的 ID 是5和6,但是测试后发现,ID是6和7,很坑 void Update () { if (Input.GetKeyDown(KeyCode.JoystickButton ...
- C# Expression 树转化为SQL与语句(二)--解决参数问题
在用Expression解析的的时候碰到一些参数(不是具体的值),会出现这种情况. 在这里我们希望得到的是id=10,而不是id=m_id;那如何来解析这些参数? ================== ...
- Watcher详解 工作机制, Watcher客户端注册、Watcher 服务端注册
Watcher详解.接口 在 ZooKeeper 中, 接口类 Watcher 用于表示一个标注你的事件处理器,其定义了事件通知相关的逻辑,包含 KeeperState 和 EventType 两个枚 ...
- ZooKeeper 特性
ZooKeeper 拥有一个层次的命名空间.(like distributed) 注意:ZooKeeper 中不许使用相对路径. 一 ZooKeeper 数据模型 ...
- Windows改动cmd字符集
在中文Windows系统中,假设一个文本文件是UTF-8编码的,那么在CMD.exe命令行窗体(所谓的DOS窗体)中不能正确显示文件里的内容.在默认情况下,命令行窗体中使用的代码页是中文或者美国的,即 ...
- 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 ...
- jfinal文件上传与下载
import com.alibaba.fastjson.JSONObject; import com.jfinal.core.Controller; import com.jfinal.ext.kit ...
- 在Linux终端使用W3M浏览器下载文件
在Linux终端使用W3M浏览器下载文件 W3M 是3个基于Linux系统命令行的WEB网站浏览工具(w3m/Links/Lynx) 对于需要验证cookie 和来源的页面,比如163的超大附件,直接 ...