vue中.sync和v-model的使用

.sync和v-model

1. .sync和v-model其实都是属于语法糖
2. 可以现实父子组件之间数据的双向绑定
3. 而v-model只能有一个,.sync可以写多个

v-model的原理

首先定义一个子组件,并在父组件中对子组件传入一个值,让值在子组件中进行展示,并在父组件中让值进行变化,让页面上显示子组件的值也随之发生变化
示例代码:
子组件

// 子组件啥也不干, 只是单纯的接收父组件传递的值,并显示在页面上
<template>
  <div>
    {{ value }}
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  }
};
</script>

父组件
注:

:value="num"不是固定的写法,你可以取任何名称,在子组件中,用你取的名称,进行接收就行了
例如,如果你写的是v-model=“num” ,那么在子组件中,你要用value这个名称来接收这个值,因为v-model默认就是用于对value属性进行数据的双向绑定

改变父组件中的值,子组件的值也会随着发生改变

<template>
  <div>
    <!-- <Son :num="num"></Son> -->
    <!-- 等同于下面的代码 -->
    <Son :value="num" @input="val => (num = val)"></Son>
    <button @click="num++">点击num++</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 1
    }
  }
}
</script>

.sync

.sync和v-model类似,也可以用于组件之间的数据双向绑定,可同时使用多个,比v-model更加强大,
相当于多了一个事件监听，事件名是update:xx，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

<template>
  <div>
    <!-- <Son :num.sync="num"></Son> -->
    <!-- 等同于下面的代码 -->
    <Son :num="num" @update:value="val => (num = val)"></Son>
    <button @click="num++">点击num++</button>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 1
    }
  }
}
</script>