vue组件传值
1、父传子:
即父组件通过属性的方式向子组件传值,子组件通过 props 来接收。
- 父组件给子组件动态绑定属性
// 父组件
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
......
}
- 子组件通过props属性接收
// 子组件
export default {
props: ['myName']
}
- props是组件实例的一个属性,代表的是接收到的数据
- props的值可以是数组也可以是对象
a)、数组形式:
props:[‘title’,‘likes’,‘isPublished’,‘commentIds’,‘author’]
b)、对象形式(需要进行校验的时候,别人给的东西不能无脑要,)
Vue.componentb('my-component',{
props:{
//基础的类型检查('null'和‘undefined’会通过任何类型验证)
//多个可能的类型
propA:Number,
propB:[String,Number],
//必填的字符串
propC:{
type:String,
required:true
},
//带有默认值的数字
poropD:{
tyoe:Number,
default:100
}
}
})
2、子传父:
子组件绑定一个事件,通过 this.$emit()
来触发
- 在子组件中绑定一个事件,并给这个事件定义一个函数
// 子组件
<button @click="changeParentName">改变父组件的name</button>
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注:此处事件名称与父组件中绑定的事件名称要一致
}
}
}
- 在父组件中定义并绑定
handleChange
事件
// 父组件
<child @handleChange="changeName"></child>
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}
3.兄弟组件之间传值
- 还是通过
$emit
和props
结合的方式
在父组件中给要传值的两个兄弟组件都绑定要传的变量,并定义事件
// 父组件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />
export default {
data() {
return {
name: 'John'
}
},
components: {
'child-a': ChildA,
'child-b': ChildB,
},
methods: {
editName(name) {
this.name = name
},
}
}
在子组件B中接收变量和绑定触发事件
// child-b 组件
<p>姓名:{{ myName }}</p>
<button @click="changeName">修改姓名</button>
<script>
export default {
props: ["myName"],
methods: {
changeName() {
this.$emit('changeName', 'Lily') // 触发事件并传值
}
}
}
</script>
// child-a 组件
<p>姓名:{{ newName }}</p>
<script>
export default {
props: ["myName"],
computed: {
newName() {
if(this.myName) { // 判断是否有值传过来
return this.myName
}
return 'John' //没有传值的默认值
}
}
}
</script>
当子组件B 通过 $emit()
触发了父组件的事件函数 editName
,改变了父组件的变量name
值,父组件又可以把改变了的值通过 props
传递给子组件A,从而实现兄弟组件间数据传递。
总结
父子通信: 父向子传递数据是通过 props
;
子向父是通过 $emit
;
兄弟通信: EventBus
;Vuex
;
跨级通信: EventBus
;Vuex
;
EventBus
EventBus 又称为事件总线。在Vue
中可以使用 EventBus
来作为沟通桥梁的概念,就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件,所以组件都可以上下平行地通知其他组件,但也就是太方便所以若使用不慎,就会造成难以维护的灾难,因此才需要更完善的Vuex
作为状态管理中心,将通知的概念上升到共享状态层次。
EventBus的使用
项目中创建一个js
文件,在两个需要通信的两个组件中分别引入这个js
,传递数据的组件里通过vue
实例方法$emit
发送事件名称和需要传递的数据,被传递数据的组件内通过vue
实例方法$on
监听到事件和接受到数据。