父组件给子组件传值通过自定义参数,子组件通过props接受值,子组件给父组件传值通过this.$emit给父组件传值
父组件
<template>
<Child :childData="childData" :childNum="childNum" @handleClick="handleClick"></Child>
</template>
<script>
import Child from "./child"
export default{
components:{ Child },
data(){
return {
childData:{},
childNum:1
}
},
methods:{
handleClick(data){
console.log(data)
}
}
}
</script>
子组件 child.vue
<template>
<div @click="handleFun">
{{childData}}{{childNum}}
</div>
</template>
<script>
export default{
name:"Child",
props:{
childData:{
type:Object,
default:{}
},
childNum:{
type:Number,
default:0
}
},
data(){
return {
terurnData:{
a:1
}
}
},
methods:{
handleFun(){
this.$emit("handleClick",this.terurnData)
}
}
}
</script>