Vue组件之间的数据交互
1. props传递数据[父级传子级]
props 接收父级传过来的数据
props是单向数据流,只能父级传子级
// Parent.vue
// 在父组件中引入子组件,将数据以v-bind指令动态传递过去
<template>
<Child :message="message" :age="age" :list="list"/>
</template>
<script>
import Child from './Child.vue'
export default {
data(){
return{
message:"要传递的数据",
age:10,
list:["11","22","33"]
}
},
components:{
Child
}
}
</script>
// 子组件中用props来接收父组件传递过来的数据
// Child.vue -- 引入到父级中
export default {
name:"Child",
// props:["message","age","list"]
// props中可以指定接收数据类型和设置默认值
props:{
message:{
type: [String,Number], // String 或 Number类型
default:""
},
age:{
type: Number,
default:0,
required:true // 必填项
},
list:{
type:Array,
default:()=>{
// 数组的默认值为[]
return [];
}
}
}
}
2. 自定义事件[子级传父级]
方法一$emit("自定义事件",数据) 发送数据给父级,父级中要实现 自定义事件
// Child1.vue
<button @click="clickHandle">按钮</button>
<script>
export default {
data(){
return{
message:"要传给父级的数据"
}
},
methods:{
clickHandle(){
// this.message是要发送给父级的数据
// onSend是父级要实现的事件名
// $emit()向父级递交数据
this.$emit("onSend",this.message)
}
}
}
</script>
// Parent1.vue
<template>
<!-- 实现子集中传过来的事件 onSend -->
<Child1 @onSend = "receiveHandle"/>
</template>
<script>
import Child1 from './Child1.vue'
export default {
methods:{
receiveHandle(data){
// data就是子集传过来的参数 this.message
// 可以将data赋值给其他值来进行显示
console.log(data);
}
},
components:{
Child1
}
}
</script>
方法二
$emit("自定义事件",数据) 发送数据给父级,父级中通过ref读到子组件并且实现 自定义事件
ref这种写法,优势在于可以处理一些异步操作,比如在外层包裹定时器setTimeOut等
// Child.vue
<button @click="sendMsg">发送数据</button>
export default {
data(){
return{
msg:"我是子级的数据"
}
},
methods:{
sendMsg(){
// $emit(自定义事件,要发送的数据)发送数据
this.$emit("sendHandle",this.msg)
}
}
}
// Parent.vue
<Child ref="child"/>
export default {
methods:{
// msg是子级传递过来的数据
callback(msg){
console.log(msg);
}
},
mounted(){
// 父级接收数据 $on(自定义事件, 回调函数)
this.$refs.child.$on("sendHandle",this.callback);
}
}
补充:如果事件只需要触发一次,可以这样设置