<template>
<div id="app">
<div class="details">
<myComponent
:show.sync="valueChild"
style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
></myComponent>
<button @click="changeValue">切换</button>
</div>
</div>
</template>
<script>
import myComponent from "./components/myComponent.vue";
export default {
name: 'App',
components: {
myComponent,
},
data() {
return {
valueChild: true,
test: "123",
}
},
methods: {
changeValue() {
this.valueChild = !this.valueChild
}
}
}
</script>
子组件
<template>
<div>
<div v-if="show">
<p>默认初始值是{{show}}，所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>
</div>
</template>
<script>
export default {
props: ['show'],
methods: {
closeDiv() {
console.log('sad')
this.$emit('update:show', false); //触发 input 事件，并传入新值
}
}
}
</script>
<style lang="scss" scoped>
</style>
