非父子组件传值

轻量级 视图层框架

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

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. 十八、React react-router4.x中:实现路由模块化、以及嵌套路由父子组件传值

    一.路由模块化(用字典定义路由,然后循环出来) 1.官方文档参考 [官方文档]https://reacttraining.com/react-router/web/guides/quick-start ...

  2. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-home

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. How To Configure NFS Client on CentOS 8 / RHEL 8

    https://computingforgeeks.com/configure-nfs-client-on-centos-rhel/

  4. EditText标签的使用

    前文: 介绍EditText的使用,这个是文本输入控件,用来输入文本内容 使用: EditText继承TextView所以TextView的东西EditText都可以使用 text:显示文本 text ...

  5. P1049 数列的片段和

    P1049 数列的片段和 转跳点:

  6. html5游戏的横屏问题

    html5 API有这个参数 Screen Orientation API 可以看w3c定义的规范 The Screen Orientation API <!-- UC强制竖屏 --> & ...

  7. Result Maps collection already contains value for com.xxx.x.dao.xxxMapper.Bas

    springboot启动时候,报错如下: Result Maps collection already contains value for com.xxx.xx.dao.xxxxxMapper.Ba ...

  8. Redis 详解 (七) AOF 持久化

    目录 1.AOF简介 2.AOF 配置 3.开启 AOF 4.AOF 文件恢复 5. AOF 重写 6.AOF的优缺点 上一篇文章我们介绍了Redis的RDB持久化,RDB 持久化存在一个缺点是一定时 ...

  9. poj3405 Corporate Identity

    和上一个1226一样吧,这个还不用翻转 然而本蒟蒻还是写不对,WA一片天,不知道自己搞什么,自从去了长沙感觉就是坑啊 while(1) iq--; /*#include <cstdio> ...

  10. ES6与ES5的继承

    ES6 ES6中的类 类与ES5中的构造函数写法类似 区别在于属性要放入constructor中,静态方法和属性实列不会继承 <script> class Person{ height=& ...