Vue基础（父子组件数据同步）
父子组件数据同步
组件双绑的实现
案例0-1：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="root">div>
<script>
const component = {
props: ["value"],
template: `
`,
methods: {
handleInput(e) {
this.$emit('input', e.target.value)
console.log(e.target.value);
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data() {
return {
value: '123'
}
},
methods: {
},
template: `
虽然并不推荐在组件内部修改 props ，但是，有的时候确实希望组件内部状态变化的时候改变 props ，我们可以通过子组件触发事件，父级监听事件来达到这个目的，不过过程会比较繁琐，vue 提供了一些操作来简化这个过程
v-model
v-model 是 vue 提供的一个用于实现数据双向绑定的指令，用来简化 props 到 data，data 到 props 的操作流程
model 选项
prop 指定要绑定的属性，默认是 value
event 指定要绑定触发的事件，默认是 input 事件
案例0-2：
import Vue from 'vue'
const component = {
model: {
prop: 'value1',
event: 'change'
},
props: ['value1'],
template: `
`,
methods: {
handleInput (e) {
this.$emit('change', e.target.value)
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data () {
return {
value: '123'
}
},
template: `
案例1：
案例2：
.sync修饰符（同步）
1. sync修饰符是什么？
父子组件通信时，子组件向父组件传递数据需要在父组件监听事件，在子组件触发事件。Vue 为了简化处理这一过程，提供了 sync 修饰符和事件的简化处理；
2. 如何使用sync修饰符
• 父组件在使用子组件时，在 prop 后面增加 .sync 修饰符，取消监听事件；
• 子组件触发事件时，事件名写 update:prop 属性名
案例0-3：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<script src="./node_modules/vue/dist/vue.js">script>
head>
<body>
<div id="root">div>
<script>
const component = {
props: ["value"],
template: `
`,
methods: {
handleInput(e) {
this.$emit("update:value", e.target.value)
console.log(e.target.value);
}
}
}
new Vue({
components: {
CompOne: component
},
el: '#root',
data() {
return {
value: '123'
}
},
methods: {
},
template: `
案例1：
案例2：
