vue 使得button获取焦点_理解Vue .sync修饰符

Vue中的的.sync修饰符的功能是：当一个子组件改变了一个 prop 的值时，父组件也会收到这个变化从而进行同步改变。

.sync修饰符是一个语法糖，下面是它的正常写法的示例：

<!-- 父组件 -->
<template>
  <div class="app">
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total = $event"/> //注意此处
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return { total: 10000 };
  },
  components: { Child: Child }
};
</script>

<style>
.app {
  border: 3px solid red;
  padding: 10px;
}
</style>

在父组件中，我们向Child子组件传递了一个"money"属性，其值为父组件中的"total"的值。同时对子组件中的"update:money"事件进行了监听，当该事件触发时就将"total"的值改为"$event"的值。

<!-- 子组件 -->
<template>
  <div class="child">
    {{money}}
    <button @click="$emit('update:money', money-100)">  //注意此处
      <span>花钱</span>
    </button>
  </div>
</template>

<script>
export default {
  props: ["money"]
};
</script>


<style>
.child {
  border: 3px solid green;
}
</style>

在子组件中，我们写了一个点击事件，button按钮被点击时会触发"update:money"，使得"$emit"的第二个参数变成了"moeny-100"。而这一个参数对应的就是父组件中的"$event"。

这样，父组件和子组件就因为"$event"和"$emit"相联系起来了，子组件中的prop的值被改变的话父组件也能知晓。

父组件中的代码:

 <Child :money="total" v-on:update:money="total = $event"/>

可以被简写成:

 <Child :money.sync="total"/>

这就是.sync修饰符的由来。