非父子组件传值

轻量级 视图层框架

复杂组件间传值,引进其他的工具或者设计模式

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的更多相关文章

  1. Vue—组件传值及vuex的使用

    一.父子组件之间的传值 1.父组件向子组件传值: 子组件在props中创建一个属性,用以接收父组件传来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给 ...

  2. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  3. Vue组件传值方法调用

    1.子组件改变父组件的值 <father  label="云盘快照" name="name2"> <son :props='rows'   @ ...

  4. vue ---- 组件传值之间使用 v-model

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  5. vue组件传值的三种方式,文字版解释

    父传子: 当子组件子父组件中当标签使用的时候,给子组件添加一个自定义属性,值为需要传递的值(如: <Child v-bind:parentToChild="parentMsg" ...

  6. Vue组件传值,父传子,子传父,非父子组件

    vue3中传值方式: 1.父组件向子组件传值 父组件Blog.vue <template> <div id="blog"> <Alert v-if=& ...

  7. Vue 组件 传值

    注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...

  8. Vue组件传值(二)之 非父子组件传值

    Vue中非父子组件之间是如何实现通信的? 本章主要讲的是非父子组件传值,父子组件传值请看上一篇文章. 1.创建新的Vue实例引入项目中,通过$emit.$on来实现非父子组件传值: 1 <!DO ...

  9. Vue组件传值(一)之 父子之间如何传值

    Vue中组件之间是如何实现通信的? 1.父传子: 父传子父组件通过属性进行传值,子组件通过 props 进行接受: 1 父组件中: 2 3 <template> 4 <div id= ...

随机推荐

  1. <深入理解redis>读书笔记

    chapter2 键管理与数据结构 对大多数redis解决方案而言,键的命名设计至关重要.对于管理来说,内存消耗和redis性能都与数据结构设计相关.所以对开发者而言,最好有数据结构的命名文档规范. ...

  2. Fr3设置图片打印

    见 fr3的文件内容,为xml <?xml version="1.0" encoding="utf-8"?> <TfrxReport Vers ...

  3. HDU 5504:GT and sequence

    GT and sequence  Accepts: 95  Submissions: 1467  Time Limit: 2000/1000 MS (Java/Others)  Memory Limi ...

  4. 怎么更改Rstudio中的默认目录

    方法一. 每次启动Rstudio之后,执行代码 setwd("F:/R/R_data") 默认目录就会修改为双引号内的位置路径. 方法二. 对Rstudio进行设置一次即可. ①点 ...

  5. Python基础笔记:字符串和编码

    1. 当处理文本时,需要现将文本转换为文字,一个字节为8位儿,一个字节最高表示整数255(1111 1111),对应255个状态: 最为人熟知的是ASCii码,ASCii码含128个状态,满足了英文编 ...

  6. 【转载】Android Gradle Build Error:Some file crunching failed, see logs for details解决办法

    Android Gradle Build Error:Some file crunching failed, see logs for details解决办法 转载请标明出处: http://www. ...

  7. 三十、SAP中的内置图标

    一.选择[编辑]->[模式] 二.选中写入模式 三.选中图标 四.选择我们需要的图标 五.选中图标后,选择复制 六.点击之后,会回到代码界面,如下 七.执行结果如下,显示出了一个神奇的图标

  8. Centos7.4 kafka集群安装与kafka-eagle1.3.9的安装

    Centos7.4 kafka集群安装与kafka-eagle1.3.9的安装 集群规划: hostname Zookeeper Kafka kafka-eagle kafka01 √ √ √ kaf ...

  9. 基于UWB技术的DW1000芯片简单解析

    近些年来随着物联网和机器人技术的大发展,精确定位技术的热度也随之攀升.目前精确定位的技术有很多,如基于wifi.RFID.zigbee.超声波.UWB等技术都可以实现精准定位.由于技术的不同,精度也不 ...

  10. BZOJ:2815: [ZJOI2012]灾难

    题解: 构造灭绝树: x指向的点表示x的祖先死亡则x死亡 动态LCA: 可以用LCT维护或直接更新倍增数组 最后统计子树点的个数 坑: 我还不会序列型Toposort #include<iost ...