Vue父子组件和非父子组件传值问题

父组件跟子组件之间的传值（具体参考lonzhubb商城）https://www.jianshu.com/p/bc07a3478313

1、父组件传值给子组件形式，ifshop是要传的对象，右边ifshop代表要传的这个对象的数据，如果只是传常量，那么属性可以不用加':'（表示动态）

<v-select :ifshop="ifshop" :clickType="clickType" @close="close" @addShop="sureAddShop"></v-select>

2、子组件接收父组件的数据用props（直接接受父组件传过来的数值，data不需要再定义变量接收）

props: {

ifshop:{
type:Boolean,
default (){
return false
}
}

}

3、子组件调用父组件

methods: {
close:function(){
this.$emit('close');
},

父组件接受子组件传过来的参数可以是一个个接收的

this.$emit('sureSelect',this.select,this.num,this.changePrice,this.changeKeyname);   //传值

sureSelect:function(keyId,num,price,keyName){}  //接收

4、非父组件跟子组件之间的传值，还有父组件调用子组件中的事件也是同样的（事件总线）

之间值

创建事件总线的方法

方法一：直接在main.js建一个空的Vue实例，用来做中央事件总线

//购物车组件信息交互
Vue.prototype.shopbus = new Vue();

在组件A中传递参数

methods: {

     add:function(){

          this.shopbus.$emit('goodsCount',this.myCount);

     }

}

在组件B中接收参数

created() {

     this.shopbus.$on('goodsCount', (myCount) => {} )

}

在使用完，要销毁的时候，需要销毁

// 最好在组件销毁前

// 清除事件监听

beforeDestroy () {

 this.$bus.$off('todoSth');
}

方法二：可以新建一个js文件(bus.js)，文件内容如下

import Vue from 'vue';

// 使用 Event Bus
const bus = new Vue();

export default bus;

在需要接受bus的文件中

通过 import bus from './bus';引用

然后通过bus.$on()接受参数

Vue父子组件和非父子组件传值问题的更多相关文章

Vue父子组件及非父子组件如何通信
1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数 ...
react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标理解因为react的单向数据流理解表单组件会因为react数据流变的不好维护理解受控组件与非受控组件的实质区别理解 ...
React受控组件和非受控组件
受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...
React：受控组件与非受控组件混用实战 - 译文
原文链接:React: hybrid controlled components in action 受控组件非受控组件混用受控组件和非受控组件原则一原则二原则三原则四实施方案总结 F ...
浅谈react受控组件与非受控组件
引言最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...
react 表单（受控组件和非受控组件）
我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...
react中受控组件和非受控组件浅析
一受控组件顾名思义,受控也就是能够被控制,简而言之也就是该组件ui的显示或者内部state逻辑的变化依赖外部的 props的传入. 二非受控组件顾名思义,非受控,也就是内部的视图变化,st ...
vue bus方式解决非父子组件间的传值
对于非父子组件之间的传值通常使用VUEX 和总线等方式解决这里我聊聊发布订阅模式(总线) <body> <div class="app"> <ch ...
简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值
1.组件的定义组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

随机推荐

C++回顾day02---<拷贝构造函数：重点>
一:补充---无参构造函数(默认无参构造函数)在实例化对象时注意点 (一)若没有写构造函数,则类会含有一个默认无参构造函数 (二)若自定义一个构造函数,则类不会提供默认构造函数 class A { p ...
net-snmp开发教程
目录 1................................................................................................ ...
Linux记录-shell获取hdfs表查询mysql
#!/bin/sh hdfs dfs -ls /user/hive/warehouse | awk '{print $8}' | awk -F "/" '{print $5}' & ...
BFC规范
BFC规范 BFC规范是什么? BFC规范也叫块级格式化上下文.是指一个独立的容器. 如何触发BFC? 我们可以通过一下几种方式触发BFC 1.通过浮动触发:float(除none) 2.通过绝对\固 ...
typeahead使用ajax补全输入框的方法
最近想使用一个输入框补全的功能,bootstrap有,但是官方手册太简单,搞了好几天,终于弄好了. 官方使用的方法是/<input type="text" data-prov ...
历史SQL语句之一
注释:查询该课程表下,所有的课程以及课程观看的人数统计 SELECT ml.`name` as lessonName,ml.category,ml.deleted,ml.teacherName, ml ...
mysql修改表结构语句
mysql alter 用法,修改表,字段等信息一: 修改表信息 1.修改表名 alter table test_a rename to sys_app; 2.修改表注释 alter table ...
HTTP Method小记
HTTP 0.9 这个版本只有GET方法 HTTP 1.0 这个版本有GET HEAD POST这3个方法 HTTP 1.1 这个版本是当前版本,包含GET HEAD POST OPTIONS PUT ...
细说JDK日志组件
1. 概述 JDK自带的日志组件在包java.util.logging下,如图: 2. 架构如上图所示,JDK日志组件核心元素包括:Logger,Handler,Filter和Formatter,他们 ...
XOR 加密
XOR 是一个神奇的运算符, 观察它的真值表, 很容易得到以下结论: 假设现有 a , b 变量, 则 a ^ 0 == a a ^ 0xff == ~a (取反加1等于作为补码的a的真值的相反数的补 ...

Vue父子组件和非父子组件传值问题

Vue父子组件和非父子组件传值问题的更多相关文章

随机推荐

热门专题