简述 · vue 修饰符 | .sync

修饰符

4个常用的修饰符

@click.stop = "xxx" 阻止冒泡机制
@click.prevent = "xxx" 阻止默认动作，常用于表单
@keypress.enter = "xxx" 键盘事件触发则调用xxx函数
:msg.sync = "xxx" 父子组件双向绑定，父组件监听子组件触发的事件并获取参数

.sync 修饰符

好好的语法糖，结合了发布者-订阅者模式（Vue内置了eventBus，即this.$emit）的方式来实现的

案例1，from 洪定伦

<div id="app">
    <div>{{bar}}</div>
    <my-comp :foo.sync="bar"></my-comp>
    <!-- <my-comp :foo="bar" @update:foo="val => bar = val"></my-comp> -->
</div>
<script>
    Vue.component('my-comp', {
        template: '<div @click="increment">点我+1</div>',
        data: function() {
            return {copyFoo: this.foo}
        },
        props: ['foo'],
        methods: {
            increment: function() {
                this.$emit('update:foo', ++this.copyFoo);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {bar: 0}
    });
</script>

就是上处的<my-comp :foo.sync="bar"></my-comp>
扩展成了<comp :foo="bar" @update:foo="val => bar = val"></comp>
成为一个自动更新父组件属性的 v-on 监听器

vue .sync 修饰符

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”，其实真正的双向绑定是存在一定问题的，因为父组件可以修改子组件，子组件也可以修改父组件，这样我们就无法看到明显的变更来源
这是尤雨溪推荐我们以 update:myPropName 的模式触发事件取而代之的原因

Vue 的3个规则

• 组件不能修改 props 外部数据
• this.$emit 可以触发事件，并传参
• $event可以获取 $emit 的参数

案例2

<!--App.vue-->
<template>
  <div id="app">
    <p>儿子向父亲要零花钱例子</p>
    <p>父亲：</p>
    App.vue 我现在有 {{total}}
    <hr>
    <Child :money="total" v-on:update:money="total=$event"/>
     </div>
</template>

<!--JS-->
<script>
import Child from './components/Child.vue'
export default {
  data(){
    return{total:10000}
  },
  components: {Child}
}
</script>

<!--Child.vue-->
 <template>
    <div class="child">
        
        <p>儿子：</p>
        {{money}}
        <button @click="$emit('update:money',money-100)"><span>花钱</span></button>
    </div>
</template>
<!--JS-->
<script>
export default {
  props:["money"]
}
</script>

image.png

• “爸爸”（父组件 App.vue）有10000元
• “孩子”（子组件 Child.vue）每次点击花钱按钮就会花掉100元
• “爸爸”（红）和“孩子”（绿）显示的 money 会相应的变化

这里的<Child :money.sync="total"/>
扩展为<Child :money="total" v-on:update:money="total = $event"/>

了解v-mode