修饰符.sync & v-model指令

修饰符.sync 的作用跟v-model 一样也是用来实现数据的双向绑定，两者的不同点在于修饰符.sync 可以绑定多次，而 v-model 只能绑定一次

修饰符.sync

<Right :num.sync="numb"></Right>
    
// 等价于

<Right :num="numb" @update:num="val => num = val"></Right>
复制代码

使用 .sync修饰符，即给元素在绑定自定义属性时，同时也绑定了一个 update:自定义属性名 的事件，从而实现一个简单的数据的双向绑定

v-model

<Left v-model="num"></Left>

// 等价于

<Left :value="num" @input="val => num = val"></Left>
复制代码

v-model 指令就是给标签绑定一个 value 属性，用于传值，同时绑定一个 input 事件，用于接收值，从而实现一个简单的数据的双向绑定

v-model 除了可以作用在文本类标签上也可以作用于组件标签上

具体代码如下：

app父组件，里面包括两个子组件 Left 和 Right

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />

    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <Left v-model="num"></Left>
      <Right :numb.sync="num1"></Right>
      <input type="text" />
    </div>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
  components: {
    Left,
    Right
  },
  data() {
    return {
      num: 100,
      num1: 100
    }
  },
  methods: {
    add(e) {
      this.num1 = e
    }
  }
}
</script>

<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>

复制代码

Left 子组件

<template>
  <div class="left-container">
    <h3>Left 组件 --- {{ value }}</h3>
    <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      required: true
    }
  },
  methods: {
    add() {
      this.$emit('input', this.value + 1)
    }
  }
}
</script>

<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>

复制代码

Right 子组件

<template>
  <div class="right-container">
    <h3>Right 组件 --- {{ numb }}</h3>
    <button @click="add">+2</button>
  </div>
</template>

<script>
export default {
  props: {
    numb: Number
  },
  methods: {
    add() {
      this.$emit('update:numb', this.numb + 2)
    }
  }
}
</script>

<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>

复制代码