vue中v-model的原理是什么？v-model作用在组件上的原理是什么？sync修饰符的原理是什么？

vue中v-model的原理是什么？

特点：双向绑定

数据=>视图

视图=>数据

场景：

1. 收集表单数据
2. 组件上

原理：

v-model只是个语法题，本质是：v-model = v-bind (:value) + v-on (@input)

<template>
  <div id="app">
    <p>{{ text }}</p>
    <input type="text" v-model="text">
    <input type="text" :value="text" @input="(e) => (text = e.target.value)" />
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      text: "xxxxxxxx",
    };
  },
};
</script>

<style>
</style>

vue中v-model作用在组件上的原理是什么？

为什么要在组件上使用v-model，我们的目的是？

1. v-model绑定的变量发生改变，能够影响组件的状态或行为，数据=>视图
2. 组件内部状态或行为发生变化，能够影响v-model绑定的变量，视图=>数据

怎么做？

v-model其实就是 :value和@input事件的简写

• 父组件：v-model直接绑定数据

• 子组件：props通过value接收数据，事件触发 input

例子

App.vue

<template>
  <div id="app">
    <my-select v-model="city">
    </my-select>
  </div>
</template>

<script>

import MySelect from "./components/MySelect.vue";

export default {
  name: "app",
  components: {
    MySelect,
  },
  data() {
    return {
      city: 104,
    };
  },
};
</script>

<style>
</style>

MySelect.vue

<template>
  <div>
    <select :value="value" @change="selectCity">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">广州</option>
      <option value="105">深圳</option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    selectCity(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style>
</style>

vue中sync修饰符的原理是什么？

.sync 是一个修饰符，用于在自定义组件中实现父子组件之间的双向数据绑定。

.sync主要应用于自定义组件之间的数据传递和状态管理，可以实现父子组件之间的双向数据流。通过 .sync，可以将父组件的数据传递给子组件，并且子组件可以修改这个数据并将修改的结果传递回父组件。

1 子组件改变父组件中的变量值

1.1 不使用sync

我们知道，vue中父组件是使用v-bind(缩写为:)给子组件传入参数，然后子组件通过prop属性接收该参数。此时我们可以给子组件传入一个函数，子组件通过调用传入的函数来改变父组件中参数的值。

即主要部分如下所示

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num="numParent" @setNum="(res)=> numParent = res"></child>

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('setNum',666)
}

此时子组件只需要触发changNum函数就能执行父组件中的setNum函数从而改变父组件中numParent的值

1.2 使用sync

上述方法较复杂，使用sync可简化写法

<!-- 父组件给子组件传入一个setNum函数 -->
<child :num.sync="numParent">

//子组件通过调用这个函数来实现修改父组件的状态
methods: {
    changNum(){
      this.$emit('update:num',666)
}

上述两种方式都可以将numParent的值由222变为666，其中父组件中绑定的参数后面加了一个.sync，子组件中的事件名称被换成了update:age，如下：

• update：固定部分，vue约定俗成的，注意必须添加update：的前缀才能正确触发事件
• num是要修改的参数的名称，是我们手动配置的，与传入的参数名字对应起来

2 实现父子组件双向绑定

vue考虑到组件的可维护性，是不允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（通过1.1方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

那么同时，vue中也提供了一种解决方案.sync修饰符（1.2方式）

允许子组件改变父组件传的props值的。父组件通过绑定属性的方式向子组件传值，而在子组件中可以通过$emit向父组件通信（通过1.1方式），通过这种间接的方式改变父组件的data，从而实现子组件改变props的值。

那么同时，vue中也提供了一种解决方案.sync修饰符（1.2方式）