天下无坑

天下无坑


组件实现v-model双向绑定(value/input)

理解一

vue 再父子组件传值时,除了传统的父组件 :属性去传值外,还可以使用 父组件v-model传值,子组件props['value']接收, 而子组件也可以通过$emit('input',false),去改变父组件中v-model 和 子组件中 value 的值 。

<!--父组件-->

<template>
   <test v-model = "isShow"></test>
   <button @click="isShow = !isShow">switch</button>
</template>
<script>
   import test from '../test';
   export default {
      components: {
         test
      },
      data() {
         return {
           isShow: false
         }
      }
   }
</script>
<!--子组件-->

<template>
  <div>
   <div>{{value}}</div>
   <Button @click="$emit('input',false)">关闭</Button>
  </div>
</template>
<script>
    export default {
        props:['value'],
        mounted() {
            console.log(this.value)
        }
    }
</script>

理解二

在父组件中有如下的定义

 <new-album v-model="isNewAlbum"></new-album>

等同于下面的写法

 <new-album v-bind:value="isNewAlbum" v-on:input="isNewAlbum=$event"></new-album>

在子组件中用下列写法接收

props: {
   // value默认保存v-model的值
   value: {
     type: Boolean
   }
 },
 data() {
   return {
     show: this.value,
   };
 },
 ...
 watch: {
   value(val) {
     this.show = val;
   },
   show(val) {
     if (!val) {
       // input事件默认改变props中value的值
       this.$emit("input", false);
     }
   }
 },

input事件将false传递给父组件中用v-model绑定的isNewAlbum,即执行isNewAlbum=false

页面列表

ITEM_HTML