vue组件传值 part2
非父子组件传值
轻量级 视图层框架
复杂组件间传值,引进其他的工具或者设计模式
1.vuex
2.总线机制
//main line
1.在main.js中注册全局的bus
Vue.prototype.bus=new Vue();
2.在组建中使用
子组建使用:this.bus.$emit('自定义事件名',data)
methods:{
handleClicks(){
this.bus.$emit('openMenu',true)
}
}
父组建使用: this.bus.$on("自定义事件名", msg => {})
mounted() {
this.bus.$on("openMenu", msg => {
this.show = msg;
});
}
vue组件传值 part2的更多相关文章
- Vue—组件传值及vuex的使用
一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue组件传值方法调用
1.子组件改变父组件的值 <father label="云盘快照" name="name2"> <son :props='rows' @ ...
- vue ---- 组件传值之间使用 v-model
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- vue组件传值的三种方式,文字版解释
父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...
- Vue组件传值,父传子,子传父,非父子组件
vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...
- Vue 组件 传值
注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...
- Vue组件传值(二)之 非父子组件传值
Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...
- Vue组件传值(一)之 父子之间如何传值
Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...
随机推荐
- S7-300位逻辑指令仿真练习 停车场
第三章 S7-300 指令应用 位逻辑指令 M存储器 在PLC中M存储区(也称位存储区,又称内部存储器标志位(M)存储器区),它属于系统存储区.在你选定具体的CPU型号后,可以查看CPU的技术规格,其 ...
- POJ2533:Longest Ordered Subsequence
Longest Ordered Subsequence Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 37454 Acc ...
- maven的概念模型及maven坐标
1.概念模型 项目对象模型:一个maven工程有一个pom.xml文件,通过pom.xml文件定义项目的坐标.项目依赖.项目信息.插件目标等. 依赖管理系统:通过maven的依赖管理对项目所依赖的j ...
- Centos6 import tensorflow遇到的问题
1.ImportError: /lib64/libc.so.6: version `GLIBC_2.16' not found 解决办法:升级系统glibc库至2.17版本 首先在网上下载glibc- ...
- 125-PHP类__set()魔术方法
<?php class ren{ //定义一个人类 //定义成员属性 private $name='tom'; private $age=15; //定义__set()魔术方法 public f ...
- 057-while循环
<?php $x=1; //初始化变量 while($x<=5){ //执行while循环 echo "$x<br />"; $x++; } ?>
- Python MySQL 教程
章节 Python MySQL 入门 Python MySQL 创建数据库 Python MySQL 创建表 Python MySQL 插入表 Python MySQL Select Python M ...
- 使用TestNG-xslt美化测试报告
用TestNG测试后,自动会生成html的测试报告,不过相信大家都有感觉,自动生成的测试报告太难看了,所以我们又用了ReportNG来美化它.在 这里给大家再介绍一下比reportNG还要稍稍美观一点 ...
- 基础语法-选择结构switch
基础语法-选择结构switch 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Switch语句特点 switch语句选择的类型在jdk1.6只支持四种:byte,short,i ...
- Java入门程序开发
Java入门程序开发 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Java程序开发流程 Java程序开发流程如下: >.将Java代码编写到扩展名为".jav ...