父传子:
自定义属性:
子组件中,通过 props 来自定义属性 父组件中,负责把数据,通过 v-bind: 绑定给子组件
父组件向子组件共享数据需要使用自定义属性。示例代码如下:
//父组件
<Son :msg="message" :user= "user info"></Son>
data() {
return {
message: "hello vue.js",
userinfo: { name: "zs", age: 20 },
};
},
//子组件
<template>
<div>
<h5>Son组件</h5>
<p>父组件传递过来的msg值是: {{ msg }}</p>
<p>父组件传递过来的user值是: {{ user }}</p>
</div>
</template>
props: ['msg','user']
子传父:
自定义事件:
在子组件中调用 this.$emit() 来触发自定义事件 参数1:字符串,表示自定义事件的名称 参数2:值,要发送给父组件的数据 在父组件中,通过 v-on: 来绑定自定义事件,并提供一个事件处理函数。通过事件处理函数的形参,接收到子组件传递过来的数据。
子组件向父组件共享数据使用自定义事件。示例代码如下:
//子组件 export default { data() { return { {count: 0} } }, methods: { this.count += 1 //修改数据时,通过$emit() 触发自定义事件 this.$emit( 'numchange',this.count) } } //父组件 <Soni @numchange="getNewCount"></Son> export default { data() { return { countFromSon: 0 } }, methods: { getNewCount(val) { this.countFromSon = val } } }
兄弟组件之间传值:
1.在main.js中创建vue实例
main.js给vue的原型添加一个属性,属性值为new Vue() Vue.prototype.$bus = new Vue()
2.在兄弟组件mychild中
<button type="default" @click="sendBro">发送给兄弟组件</button>
methods:{
sendBro(){
this.$bus.$emit("toBro","发送给兄弟组件")
}
}
3.在兄弟组件mya中接受
mounted() {
this.$bus.$on("toBro",(name)=>{
console.log(name)
})
}