vue在自定义组件中使用v-model

要想解释清楚v-model在自定义组件中的用法，我们得先来看看普通的组件传值…

一、普通的组件传值

如下代码：
这是一个简单的父子，子父传值示例

父组件：

<!-- parent -->
<template>
  <div class="parent">
    我是父组件：{{par}}
    <Child @givepar="formChild" :giveChild="par"></Child>
  </div>
</template>
<script>
import Child from './children.vue';
export default {
  data () {
    return {
      par: '来自父组件的值'
    };
  },
  components: {
    Child
  },
  methods: {
    formChild (val) {
      this.par = val;
    }
  }
}
</script>

子组件：

<!-- child -->
<template>
  <div class="child">
    我是子组件：{{giveChild}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  props: {
    giveChild: String
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

---

在上面的传值当中我们只是父向子，子向父各传值一次，但是需要起四个左右的名字…

如果使用v-model的话，还可以让自己的脑细胞多活一会…

---

二、v-model

先来看一下api：

官方文档中说：允许一个自定义组件在使用 v-model 时定制 prop 和 event。

这句话的意思很明显，那就是不让你看懂。

我们还是来看代码吧…

首先，删掉传值的代码，写成v-model。

父组件：

<!-- parent -->
<template>
  <div class="parent">
    我是父组件：{{par}}
    <!-- <Child @givepar="formChild" :giveChild="par"></Child> -->
    <Child v-model='par'></Child>
  </div>
</template>
<script>
import Child from './children.vue';
export default {
  data () {
    return {
      par: '来自父组件的值'
    };
  },
  components: {
    Child
  },
  methods: {
    // formChild (val) {
    //   this.par = val;
    // }
  }
}
</script>

子组件代码：

增加model，写入prop和event

<!-- child -->
<template>
  <div class="child">
    我是子组件：{{giveChild}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  //   props: {
  //     giveChild: String
  //   },
  model: {
    prop: 'giveChild',
    event: 'givepar'
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

到此为止，就实现了父向子，子向父的传值了。

---

另，接收父组件传值也可在props中接收，但字段必须为value。

子组件代码如下：

<!-- child -->
<template>
  <div class="child">
    我是子组件：{{value}}<br />
    <button @click="go">回应</button>
  </div>
</template>
<script>
export default {
  props: {
    value: String
  },
  model: {
    // prop: 'giveChild',
    event: 'givepar'
  },
  methods: {
    go () {
      this.$emit('givepar', '来自子组件的值');
    }
  }
}
</script>

以上。