基于现在都是模块化开发,vue开发过程中组件之间传值是必不可少的,常用的vue的组件传值分为三种方式:父传子、子传父、非父子组件传值。
一、父组件给子组件传值----通过属性
1.子组件需要做的事:
(1)创建一个子组件
(2)写好子组件中自己的逻辑
(3)通过 props:[父组件传值的key] 来接收父组件传递的值
props可接收对象(属性为传递的值,属性值为规定传递值的数据类型)、数组格式的值
2.父组件需要做的事:
(1)导入子组件
import subimagesilder from '../subcomponent/subimagesilder.vue';
(2)注册子组件
components:{
subimagesilder
}
(3)在<template></template>中使用子组件
<subimagesilder :imageList="imageList"></subimagesilder>
注意:imageList是父组件给子组件传递的值
形式:<子组件对象 :父组件传值的key=值></子组件对象>
二、子组件给父组件传值----通过触发自定义事件
1.子组件需要做的事:
(1)写好子组件自己的代码
(2)在需要传值给父组件数据的地方定义并调用key事件
this.$emit(key,值)
key表示自定义事件名,值表示要传递的值
这里表示会触发key事件
注意,这个key等下在父组件中要使用到
2.父组件需要做的事:
(1)导入子组件
(2)在components中注册子组件
(3)在<template></template>中使用子组件
(4)在子组件的标签中,注册(绑定)key事件发生时执行的函数名称,例如:
<subnumber v-on:key='函数名称'></subnumber>
(5)在父组件的methods中,写好接收子组件传过来的值的函数即可,例如:
methods:{
函数名称(子组件传递过来的值){
xxxxxx
}
}
子组件负责触发key事件,父组件负责注册key事件
三、非父子组件之间传递值----通过Bus/总线/发布订阅模式/观察者模式(4种叫法)
1.创建一个公共的vue实例
- 方式1:创建一个公共的vue实例(在js中),并且导出,在传值和接收值的两方都引入这个js
- 方式2:Vue.prototype.bus = new Vue();
表示先在Vue的原型上添加bus属性,值为Vue的一个实例x。之后创建的Vue实例中都带有bus属性,并且bus属性值都指向Vue实例x
2.在传值的组件中,调用公共的vue实例。
通过 vue实例.$emit() 传值。传值方触发自定义事件
3.在接收的组件中,调用公共的Vue实例。
通过 Vue实例.$on() 接收。接收方注册自定义事件
注意:触发和监听两个操作必须在公共的vue实例中进行传值和接收值