一.sync高级修饰符是用来干什么的？
1.子组件用来修改父组件传递过来的数据,
2.传递的方式
子:
通过属性传值的方式, :属性名='要传递的值'
在子组件中定义:this.$emit(事件名,传递的参数)
父:
在父组件中: @事件名=‘函数名',通过在父组件中修改数据。
3.通过sync进行修改
在子组件上
代码演示:
<son :num.sync="number" @input="number = $event"></son><template>
<div class="">
<button @click="fn(1)">+1</button>
<input type="text" />
<button @click="fn(-1)">-1</button>
</div>
</template>
<script>
export default {
props: {
num: {
type: Number,
},
},
name: "",
methods: {
fn(val) {
this.$emit("input", this.num + val);
},
},
};
</script>
解析:在son组件上加入了sync修饰符进行修饰，通过this.$emit将数据传递过去，this.num+val对应的是$event,这里不是事件对象，而是一种固定的写法.将值赋值给父组件中的number变量从而修改了里面的值。
二.V-model在组件上的使用
1.在子组件上使用V-model 进行绑定
在子组件的标签上通过v-model双向绑定:
<son v-model="number"></son>
data() {
return {
number: 1,
};
},在son组件:
<template>
<div class="">
<button @click="fn(+1)">+1</button>
<input type="text" />
<button @click="fn(-1)">-1</button>
</div>
</template>
<script>
export default {
props: {
value: {
type: Number,
},
},
model: {
value:'value'
event: "input",
},
name: "",
methods: {
fn(val) {
this.$emit("input", this.value + val);
},
},
};
</script>
解析: input如果不写是默认的，value不写也是默认的。实现了组件间的双向绑定。如果把需要进行更改，则需要全部进行修改。
三.单向数据流
1. 因为通过props来进行传递值的话,可能会造成父组件的数据发生改变所以官方不推荐使用。
2.单向数据流：栈不可修改，堆可以修改
基本数据类型不可修改，复杂数据类型，只要不改变它的引用地址（栈），它的值随便修改。
3.代码演示:
父组件:
<son :arr="arr" />
data() {
return {
arr: 1,
};
},子组件:
<button @click="fn"></button>
props: {
arr: {
type: Number,
},
},
methods: {
fn() {
this.arr = 2;
},
},4.图示:
子组件里面的数据更改
5.当穿过去的是一个引用类型时候
代码:
父组件:
<son :obj="obj" />
data() {
return {
obj: {
name: "张三",
},
};
},子组件:
<button @click="fn">点击修改</button>
methods: {
fn() {
this.obj.name = "赵云";
},
},图示：因为穿过去的数组属于复杂的数据类型，值保存在栈中的地址上，传过去的也是一个地址，
和子组件公用一个地址，子组件的值发生改变，父组件的值也会发生改变
6.
7.model属性的应用
总共有两个配置项:
解析:默认值是input，value。 如果要进行修改 直接在event和value后面进行修改。