10-vue移动端项目(v-model的原理跟使用主要模仿在父组件定义一个值控制子组件的显示与隐藏)

现在有一个父组件App.vue,它有一个子组件mycom.vue,并且这个mycom.vue中使用了vant组件(模拟的)

App.vue:

<template>
  <div>
    <h1>我 App.vue</h1>
    <!-- 需求：封装一个组件，这个组件的显示与隐藏是通过 v-model 传入的 show 属性来决定 -->
    <h2>1.0 v-model 的实现原理</h2>
    <button @click="show=true">点我显示组件</button>
    <!-- 需求：由于 channel 中有大量的逻辑代码，所以需要将popup封装为一个单独的组件 -->
    <h2>2.0 将 vant 中的组件进行封装</h2>
    <!-- <mycom :value="show" @input="e=>show=e" /> -->
    <!-- <mycom v-model="show" :myname="myname" @update:myname="e=>myname=e" /> -->
    <mycom v-model="show" :myname.sync="myname" />
  </div>
</template>

<script>
import mycom from './components/mycom'
export default {
  data () {
    return {
      show: false,
      myname: 'xjj'
    }
  },
  components: {
    mycom
  }
}
</script>

mycom.vue:

<template>
  <div>
      <!-- 将 vant 中的 mycom01 封装为组件 -->
      <h3>封装 mycom01 组件</h3>
      <!-- <vantCom v-model="value" /> -->
      <vantCom :value="value" @input="e=>$emit('input', e)" />
      <!-- 这里使用的 value 是从 App.vue 中传回的 -->
      <!-- 在 mycom 中被修改，是被 v-model 修改的 -->
      <!-- 将不应该将 value 在 App 中修改，而不是在这里 -->
      {{ myname }}
      <button @click="changeName">点我改 name</button>
  </div>
</template>

<script>
// 导入 vant 中的 mycom01
import vantCom from '../vant/01mycom'
export default {
  props: ['value', 'myname'],
//   methods: {
//     fn (e) {
//       this.value = e
//     }
//   },
  methods: {
      changeName () {
          this.$emit('update:myname', 'yjj')
      }
  },
  components: {
      vantCom
  }
}
</script>

vant文件夹里的01mycom.vue

<template>
  <div>
      <div v-if="value" @click="close" class="container">
        <div class="box"></div>
      </div>
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    close () {
      // 将 value 设置为 false
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped>
.container {
    width: 100%;
    height: 400px;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 200px;
    height: 200px;
    background-color: pink
}
</style>

效果演示:

点击按钮"点我显示组件"显示出弹出层,点击灰色的(模拟遮罩尘)弹出层消失