我们都知道vue的数据传递是单向的，不允许子组件直接修改父组件的值，我们平时做法是通过emit去通知父组件，父组件去监听事件来修改值，这种方式其实还有一种更加优雅的写法，让我来慢慢讲解，如果有误可在评论区留言~

v-model

父组件

<template>
  <div>
    <div>这是父组件</div>
    <button @click="isShowB = true">展示B</button>
    <B v-model:visbile="isShowB"></B>
  </div>
</template>

<script>
import B from "./b.vue";
export default {
  data() {
    return {
      isShowB: false,
    };
  },
  methods: {},
  components: {
    B,
  },
};
</script>

子组件：

<template>
  <div v-if="visbile">
    <div>这是子组件</div>
    <button @click="close">关闭B</button>
  </div>
</template>

<script>
export default {
  props: ["visbile"],
  methods: {
    close() {
      this.$emit("update:visbile", false);
    },
  },
};
</script>

子组件通过调用$emit("update:props变量名"，值)的方式修改父组件的变量值，然后父组件通过v-model来绑定props变量，监听到值需要改变的时候就会修改与props绑定的变量的值

如何优雅修改父组件传进来的props

v-model