父组件使用v-model，实现父子组件之间动态传值

通常子组件更新某个变量并需要告知父组件时，需要子组件 $emit触发事件，然后父组件$ on监听该事件再去改变值。

但是熟悉 v-model 的双向数据绑定原理后，我们可以巧妙地运用这一原理去实现父子组件之间动态传值

方法总结：

父组件通过v-model绑定一个变量传给子组件

子组件通过props['value']接收

子组件通过$emit('input',XX）去改变父组件中v-model绑定的变量

例子：

<!--子组件-->

<template>
  <div>
    <div v-show="isShow">{{value}}</div>
    <Button @click="hide">隐藏</Button>
  </div>
</template>
<script>
  export default {
    props:['value'],
    data() {
      return {
        isShow: this.value
      }
    },
    methods: {
      hide() {
        this.isShow = false,
        $emit('input',false)
      }
    }
  }
</script>

<!--父组件-->

<template>
    <AddModal ref="addModal" v-model="showModal" />
    <Button @click="showModal">显示</Button>
 </template>
 <script>
    import AddModal from '../addModal';
    export default {
       components: {
        AddModal
       },
       data() {
          return {
            showModal: false
          }
       },
       methods: {
         showModal() {
           this.showMal: true
         }
       },
    }
 </script>

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料