非父子组件传值

轻量级 视图层框架

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

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. P1044 火星数字

    P1044 火星数字 转跳点:

  2. WTL之VS2013环境搭建

    新版博客已经搭建好了,有问题请访问 htt://www.crazydebug.com 从国外回来,在老家入职了新公司,做c++开发,刚到新公司要熟悉公司的项目代码,目前公司在做一个主播聚合平台,界面采 ...

  3. s5pc100开发板网卡驱动的移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y fsc100开发板 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc 平台代码修改 vim   ...

  4. GLConsole的编译和使用

    1.在CVars文件中搜索tinyxml,去掉所有tinyxml的编译选项 2.Add the following line to the "CMakeLists.txt" fil ...

  5. 078-PHP数组排序,两次循环法

    <?php $arr=array(35,43,56,2,76,23,47,55,71); //定义一个数组 echo '数组排序之前的信息:<br />'; print_r($arr ...

  6. 可并堆模板题-mergeable heap

    Description 有n个点,第i个点标号为i,有两种操作:0 x y 表示把x所在堆和y所在堆合并.1 x 表示询问x所在堆的最小权. Input 第一行两个整数n,m,表示有n个点m个操作. ...

  7. centos7搭建kafka集群

    一.安装jdk 1.下载jdk压缩包并移动到/usr/local目录 mv jdk-8u162-linux-x64.tar.gz /usr/local 2.解压 tar -zxvf jdk-8u162 ...

  8. python基础(二)抽象

    1 函数与模块 编程大师Martin Fowler先生曾经说过:"代码有很多种坏味道,重复是最坏的一种!" 函数 为了减少代码中重复出现的冗余代码,通常我们选择创建函数来供代码重复 ...

  9. 基础语法-循环结构do...while

    基础语法-循环结构do...while 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.do...while语句格式 do{ 执行语句; }while(条件表达式); 温馨提示: ...

  10. Vue中 几个常用的命名规范

    1,组件名 官方推荐的组件名是 每个单词首字母大写(PascalCase) 或者 全小写用 - 连接(kebab-case) . 在DOM中使用的时候, 改为全小写, 单词之间用 - 连接. Vue. ...