组件实现v-model双向绑定（value/input）
<h4>理解一</h4>
<p>vue 再父子组件传值时，除了传统的父组件 ：属性去传值外，还可以使用 父组件v-model传值，子组件props['value']接收，
而子组件也可以通过$emit('input',false)，去改变父组件中v-model 和 子组件中 value 的值 。</p>
<pre><code class="language-html"><!--父组件-->
<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></code></pre>
<pre><code class="language-html"><!--子组件-->
<template>
<div>
<div>{{value}}</div>
<Button @click="$emit('input',false)">关闭</Button>
</div>
</template>
<script>
export default {
props:['value'],
mounted() {
console.log(this.value)
}
}
</script></code></pre>
<h4>理解二</h4>
<p>在父组件中有如下的定义</p>
<pre><code class="language-html"> <new-album v-model="isNewAlbum"></new-album></code></pre>
<p>等同于下面的写法</p>
<pre><code class="language-html"> <new-album v-bind:value="isNewAlbum" v-on:input="isNewAlbum=$event"></new-album></code></pre>
<p>在子组件中用下列写法接收</p>
<pre><code class="language-html">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);
}
}
},</code></pre>
<p>input事件将false传递给父组件中用v-model绑定的isNewAlbum，即执行isNewAlbum=false</p>