在组件上使用v-model，实现子父组件双向绑定，.sync及update用法

目的：1、父子组件之间可以相互修改数据。

自定义组件v-model
一个组件上的v-model默认会利用名为value的prop和名为input的事件，但是像单选框，复选框等类型的输入控件可能会将value特性用于不同的目的。

v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后做了两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
例如,在原生表单元素中：

相当于：

v-model用于自定义组件中，应该使用以下操作：
1.接收一个value prop。
2.触发input事件，并传入新值。
例如，在自定义组件中：

相当于

注：这个时候，inputValue接受的值就是input事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要$emit去触发input的事件。
this. $emit(‘input’,value)
v-model主要针对表单实现数据双向绑定，如果要对组件实现双向绑定，可以想象把子组件变成表单，所以此时使用input关键字。
v-model是vue2中唯一支持双向绑定的指令，用于表单控件绑定，v-model其实是个语法糖。
如：

<input v-model="something">
//这不过是一下示例的语法糖：
<input v-bind:value="something" v-on:input="something=$event.target.value">
//简写
<input :value="something" @input="something=$event.target.value">

也就是说，你只需要在组件中声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value.
例如：

父组件代码：

<template>
<div class="mydiv">
父组件中的title显示内容：{{title}}
<BR v-model="title"></BR><!--在这里可以把当前的组件当做一个input控件更容易理解-->
</div>
</template>
<script>
import BR from '@/components/B.vue';
export default {
components: {
BR
},
data() {
return {
title: ''
}
},
methods: {

}
}
</script>

子组件代码：

<template>
<div>
子组件中的title显示内容：{{value}}<!--必须使用value关键字-->
<button @click="handleInput">点击</button>
</div>
</template>
<script>
export default {
props: ['value'],//必须使用value关键字
data() {
return {}
},
methods: {
handleInput() {
this.$emit('input', '111111');//必须使用input关键字，触发input事件
}
}
}
</script>

实例3，当子组件值改变时，父组件的值同时改变，实现双向绑定，

父组件内容：

<template>
<div class="mydiv">
父组件中的title显示内容：{{title}}
<BR v-model="title"></BR>
</div>
</template>
<script>
import BR from '@/components/B.vue';
export default {
components: {
BR
},
data() {
return {
title: 0
}
},
methods: {

}
}
</script>

子组件内容：

<template>
<div>
子组件中的title显示内容：{{value}}
<button @click="handleInput">点击</button>
</div>
</template>
<script>
export default {
props: ['value'],
data() {
return {
i: 0
}
},
methods: {
handleInput() {
this.i += 1;
this.$emit('input', this.i)
}
}
}
</script>

使用.sync及update实现父子双向绑定

例如，父子键中有一个按钮可以改变父组件中的值同时也可以改变子组件的值，子组件中有一个按钮既可以改变子组件中的值也可以改变父组件中的值，实现子父组件双向绑定：

父组件代码：

<template>
<div>
外面的值：{{parentsTest}}
<button @click="fn">外面改变里面</button>
<B :childTest.sync="parentsTest"></B><!--此处使用了.sync修饰符-->
</div>
</template>
<script>
import B from '@/components/B.vue';//导入子组件
export default {
components: { B },//注册子组件
data() {
return {
parentsTest: 0
}
},
methods: {
fn() {
this.parentsTest += 1;
}
}
}
</script>

子组件代码：

<template>
<div>
里面的值：{{childTest}}
<button @click="fn2">里面改变外面</button>
</div>
</template>
<script>
export default {
props: {
childTest: 0
},
data() {
return {
}
},
methods: {
fn2() {
//这是关键update:childTest自定义事件会告诉父组件将父组件的parentsTest的值改为this.childTest+1，并传回给子组件。
this.$emit('update:childTest', this.childTest + 1);
}
}
}
</script>

.sync修饰符

该修饰符被扩展为一个自动更新父组件属性的v-on监听器。
如下代码：

<template>
<div>
<B :show.sync="valueP"></B>
<button @click="changeVal">点击切换</button>
</div>
</template>
<script>
import B from '@/components/B.vue';
export default {
components: {
B
},
data() {
return {
valueP: true
}
},
methods: {
changeVal() {
this.valueP = !this.valueP;
}
}
}
</script>

<template>
<div v-if="show"><!--根据show是true或false来决定是否显示当前内容-->
<p>默认初始值是{{show}},所以是显示的</p>
<button @click.stop="closeDiv">关闭</button>
</div>
</template>
<script>
export default {
props: ['show'],
data() {
return {}
},
methods: {
closeDiv() {
this.$emit('update:show', false);//更新show的值及父组件valueP的值，并传值为false
}
}
}
</script>

总结：
vue修饰符.sync的功能是：当一个子组件改变了一个prop的值时，这个变化也会同步到父组件中所绑定。