.sync 修饰符

<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>