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

组件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. UI Framework-1: Aura Focus and Activation

    Focus and Activation Focus and Activation are closely related.   Definitions Focused window - this i ...

  2. Debian9.5下ssh密钥登录配置步骤(免密码登录)和ssh-keygen 命令常用参数

    密钥登录步骤(免密码登录)ssh登录提供两种认证方式:口令(密码)认证方式和密钥认证方式.其中口令(密码)认证方式是我们最常用的一种,出于安全方面的考虑,介绍密钥认证方式登录到linux/unix的方 ...

  3. TP5 安装

    一.官方手册: https://www.kancloud.cn/manual/thinkphp5/118003 二.Git 方式安装[最新框架下载方式] 首先克隆下载应用项目仓库 git clone ...

  4. Studio3T 破解,无需命令计划任务

    最近项目中使用到了MongoDB,苦于命令行不好操作,所以就寻觅了一下MongDB的GUI管理工具,最终找到了Studio3T,功能非常强大,但是苦于只有评估版本30天,最可气的是一时手贱,修改了系统 ...

  5. Spring EL表达式和资源调用

    Spring EL表达式     Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似于在jsp的EL表达式语言.     Spring 开发中经常涉及调用各种资源的情况, ...

  6. JavaScript语言基础3

     JavaScript能够处理一些来自于现实世界的数据类型.比如:数字和文本. 同一时候JavaScript中也包括了一些具 有抽象性质的数据类型.比如对象数据类型. JavaScript它是一种弱类 ...

  7. HDU 5353 Average 贪心

    就是贪心啊,不知道为啥总是不过,总是WA 方法不对吗? 将数组扩展一倍,从左到右扫描,大于平均数就给右边的,小于就从右边拿,等于就不变,记录下操作类型. 大于2直接NO,不知道哪错了,自己出了一些数据 ...

  8. HUE配置文件hue.ini 的filebrowser模块详解(图文详解)(分HA集群和非HA集群)

    不多说,直接上干货! 我的集群机器情况是 bigdatamaster(192.168.80.10).bigdataslave1(192.168.80.11)和bigdataslave2(192.168 ...

  9. 在C# 获取当前应用网址

    /// <summary>        /// 获取当前应用网址        /// </summary>        /// <returns></r ...

  10. 常用sql语句及案例

    目录 1)基本 2)数学函数 3)rownum 4)分页 5)时间处理 6)字符函数 7)to_number 8)聚合函数 9)学生选课 10)图书馆借阅 基本 --新建表: create table ...