父传子
父容器
<template>
<div>
<zdy :module='test'></zdy>
</div>
</template>
<script>
import zj from "./zj";
// 父传子
export default {
components:{
// 映射写法
'zdy':zj,
// 另一种写法 直接写
// zj,
},
data(){
return{
test:
}
}
}
</script>
子容器
<template>
<div>
<div v-html="module"></div>
</div>
</template>
<script>
export default {
name: 'module',
// 数组形式
props: ['module'],
// 对象形式 这种 声明就要求 传过来的必须是 对象 规定了 type
// props: {
// seller: {
// type: Object
// }
// },
//默认值 如果 传过来的值为空 则取default 的默认值
//props:{value:[number,string],default:0}
}
</script>
子传父 （可以通过$on来回调$emit给父级的值）
父容器
<template>
<div>
<zdy @sedParentDate='receptionChildDate'></zdy>
</div>
</template>
<script>
import zj from "./zj";
// 子传父
export default {
components:{
// 映射写法
'zdy':zj,
// 另一种写法 直接写
// zj,
},
data(){
return{
}
},
methods:{
receptionChildDate(data){
console.log(data)
}
}
}
</script>
子容器
<template>
<div>
<div @click="childClick">点我</div>
</div>
</template>
<script>
export default {
name: 'module',
// 数组形式
props: ['module'],
// 对象形式
// props: {
// seller: {
// type: Object
// }
// },
methods:{
childClick(){
// 子传值到父（外部调用内部事件）
this.$emit('sedParentDate','我是子组件传过来的值')
}
},
mounted () {
this.$on('sedParentDate', (data) => {
console.log('在自己这里打印出来', data) // 我是子组件传过来的值
})
}
}
</script>