1父传子
在父组件上的自组件标签上绑定一个自定义属性,挂载需要传递的值,在子组件使用props:[]来接受,下边是代码
//这个是父组件,name就是传递的值 myName是自定义属性
<user-detail :myName="name" />
export default {
components: {
UserDetail
}
}
// 子组件
export default {
props: ['myName']
}
/*
//这里是是子组件
props: { myName: String } //这样指定传入的类型,如果类型不对会警告
props: { myName: [String, Number] } // 多个可能的类型
prosp: { myName: { type: String, requires: true } } //必填的的字符串
props: {
childMsg: {
//指定属性为数组
type: Array,
default: () => []
}
} // default指定默认值
如果 props 验证失败,会在控制台发出一个警告。
2子传父
子传父就是在父组件绑定自定义事件在子组件调用父组件方法,并且将需要传递的值作为参数传递给父组件,下边是代码
// 父组件 绑定自定义事件handleChange
<child @handleChange="changeName"></child>
methods: {
changeName(name) { // name形参是子组件中传入的值Jack
this.name = name
}
}
// 子组件 调用父组件的事件
<button @click="changeParentName">改变父组件的name</button>
export default {
methods: {
//子组件的事件
changeParentName: function() {
this.$emit('handleChange', 'Jack') // 触发父组件中handleChange事件并传参Jack
// 注:此处事件名称与父组件中绑定的事件名称要一致
}
}
}
3兄弟组件传值
1.还是通过 $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,从而实现兄弟组件间数据传递。
- 通过一个空 vue 实例
创建一个 EventBus.js 文件,并暴露一个 vue 实例
import Vue from ‘Vue’
export default new Vue()
在要传值的文件里导入这个空 vue 实例,绑定事件并通过 $emit 触发事件函数
(也可以在 main.js 中全局引入该 js 文件,我一般在需要使用到的组件中引入)
<template>
<div>
<p>姓名: {{ name }}</p>
<button @click="changeName">修改姓名</button>
</div>
</template>
<script>
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: 'John',
}
},
methods: {
changeName() {
this.name = 'Lily'
EventBus.$emit("editName", this.name) // 触发全局事件,并且把改变后的值传入事件函数
}
}
}
</script>
在接收传值的组件中也导入 vue 实例,通过 $on 监听回调,回调函数接收所有触发事件时传入的参数
import { EventBus } from "../EventBus.js"
export default {
data() {
return {
name: ''
}
},
created() {
EventBus.$on('editName', (name) => {
this.name = name
})
}
}