Vue-.sync 修饰符的作用

280 阅读1分钟

在有些需求下,对一个子组件的 prop值 进行“双向绑定”。

不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,父组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

这也是为什么我们推荐以update:myPropName的模式触发事件取而代之。

1. 我们常常在父组件中用

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

使用.sync语法糖替代:

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

2. 子组件中用

<button @click="$emit('update:money',money-1)">花钱</button>

而不是

<button @click="money-=1)">花钱</button>

这个写法没法修改到外部的props

// App.vue中 ```

<script>
import Child from './Child.vue'
export default{
  data(){return{total:1000}},
  components:{Child:Child}
  }
</script>
<style>
</style>
```

// 子组件Child.vue中

<template>
  <div>
    这里开始是子组件Child:{{money}}
    <hr>
    <button @click="$emit('update:money',money-1)">
      <span>花钱</span>
    </button>
  </div>
</template>

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

// main.js中渲染模板

import Vue from 'vue'
import App from './App'

new Vue({
  render:h=>h(App)
}).$mount("#app")