- 父组件传值给子组件
- 父组件传值子组件实时改变
3.子组件和父组件通讯
直接看代码:
//父组件代码
<template>
<div>
<div v-if="!show1">
父组件
<button @click="show1 = !show1">点击显示子组件</button>
</div>
<!-- 子组件 -->
<list v-if="show1" v-on:myCancel="show1 = !show1"
:show="show1" :testData.sync="sonData"></list>
</div>
</template>
<script>
import list from './list'
export default {
components:{
list
},
data(){
return {
sonData:{name:'子组件'},
show1:false
};
},
methods:{}
}
</script>
<style lang="less">
</style>
子组件代码
<template>
<div class="orgContent-out" v-if="show">
我是{{testData.name}}
<button @click="cancel">关闭子组件,显示父组件</button>
</div>
</template>
<script>
export default {
name: "list",
props: {
testData: {
type: Object,
default(){
return {}
}
},
show: {
type: Boolean,
default: true
}
},
data() {
return {};
},
methods: {
cancel() {
this.$emit("myCancel", "取消");
}
},
};
</script>
<style lang="less">
</style>
结果:



完成啦,喜欢就留个❤❤吧
网友评论