1、父组件向子组件传值
使用自定义属性,示例代码如下:
父组件
<Son :msg="message" :user="userInfo"></Son>
data() {
return {
message: "hello vue",
userInfo: {
name:"zs",
age: 20
}
}
}
子组件
<template>
<div>
<h5> Son组件 </h5>
<p>父组件传过来的msg是:{{ msg }}</p>
<p>父组件传过来的user值是: {{ user }}</p>
</div>
</template>
<script>
props: ["msg","user"]
</script>
2、子组件向父组件传值
使用自定义事件,示例代码如下:
子组件:
<template>
<div>
<h5>count的值是{{ count }}</h5>
<button @click="add">count + 1</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
add() {
this.count += 1
// 修改数据时,通过$emit()触发自定义事件
this.$emit('numChange', this.count)
}
}
}
</script>
父组件:
<Son @numChange="getNewCount"></Son>
<script>
export default {
data() {
return {
countFromSon: 0
}
},
methods: {
getNewCount(val) {
this.countFromSon = val
}
}
}
</script>
子组件中点击按钮时,子组件中触发 add 函数,同时 count 值发生变化,此时在子组件中的自定义事件 numChange 通过 emit 传递到父组件中并调用 getNewCount 函数,同时将子组件中的this.count 通过 val 形参赋值给父组件中的 countFromSon ,从而将子组件的值传给父组件。
3、兄弟组件之间传值
在vue2.x中,兄弟组件之间数据共享使用EventBus
①创建EventBus.js模块,并向外共享一个Vue的实例对象,并在兄弟组件中引入
②在数据发送方,调用bus.$emit('事件名称', 要发送的数据)方法触发自定义事件
③在数据接收方,调用bus.$on('事件名称', 事件处理函数)方法注册一个自定义事件