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= ...
随机推荐
- 09 MySQL字符集
字符集的选择 1.数据库方面最流行的是UTF-8 2.如果只考虑支持汉字,那么使用GBK,毕竟GBK下,每个汉字只占用2个字节,而UTF-8需要3个字节. 3.如果需要做大量的 ...
- Linux netfliter 架构
netfliter 简介 netfilter是在Linux 2.4.X内核引入的一个子系统,它提供了一个抽象的.通用框架,这个框架提供了一整套的钩子函数的管理机制.包括钩子函数的原型定义,注册,注销等 ...
- spring boot rest api exception解决方案
1.控制器级别@ExceptionHandler public class FooController{ //... @ExceptionHandler({ CustomE ...
- 《ES6标准入门》(阮一峰)--2.let 和 const 命令
1.let命令 基本用法 let只在命令所在的代码块内(花括号内)有效. for循环的计数器,就很合适使用let命令. //var var a = []; for (var i = 0; i < ...
- Information:java: Errors occurred while compiling module 错误
在用 IDEA 启动 tomcat 时 发现项目编译报错,如图所示 于是安装网上的方法把 JDK 版本都改了一下 改完之后按照道理来说,应该编译通过的,但是我就想,编译不通过肯定跟 IDEA 的配置有 ...
- python保留小数位
前言 保留小数位是我们经常会碰到的问题,尤其是刷题过程中.那么在python中保留小数位的方法也非常多,但是笔者的原则就是什么简单用什么,因此这里介绍几种比较简单实用的保留小数位的方法: 方法一:fo ...
- LICEcap--一款录屏生成Gif的软件
下载地址:http://www.cockos.com/licecap/ 效果图:
- 【转】modelBuilder.Configurations.AddFromAssembly in EF Core
EntityFramework 6.x protected override void OnModelCreating(ModelBuilder modelBuilder) { base.OnMode ...
- 如何在Swift的代码中使用OC的代码, 在OC的代码中使用Swift的代码?
https://www.cnblogs.com/upliver/p/5138160.html 如何在Swift的代码中使用OC的代码, 在OC的代码中使用Swift的代码? 随着苹果公司对Swift的 ...
- 实验吧web-难-认真一点!(布尔盲注,py脚本)
也可用bp进行爆破,这里用py脚本. 打看网页输入1,显示You are in,输入2,显示You are not in,是个布尔注入. 然后看看过滤了什么. sql注入没有过滤:--+.or sql ...