.sync

一、点击子组件内容改变父组件中的对应值

	首先看到 .sync 我们需要知道这是个修饰器，类似的修饰器还有 .stop .prevent 之类，其实这个修饰符就是vue封装了，子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update

当我们从父组件向子组件传入一个变量，子组件需要根据自身的变化引起变量值的改变时
可应用至弹框的开启、关闭

1.使用.sync

父组件

<template>
    <div>
        <h1>父组件{{this.activeName}}</h1>
        <SonPoint :activeName.sync="activeName" />
    </div>
</template>

<script>
import SonPoint from '../componentsModule/SonPoint.vue';
export default {
    components: { SonPoint },
    data() {
        return {
            activeName: true
        }
    },
}

子组件

<template>
    <div>
        <h1>子组件{{  this.activeName  }}</h1>
        <button @click="changeName">点击改变值</button>
    </div>
</template>

<script>
export default {
    props: {
        activeName: { type: Boolean, default: false }
    },
    methods: {
        changeName() {
            this.$emit("update:activeName", !this.activeName)
        }
    }
}
</script>

2.使用常规$emit触发

如果不使用.sync绑定变化的变量，则在父组件中定义一个函数用来改变变量的值，将函数以自定义事件的形式传递给子组件，子组件定义点击事件触发父组件的自定义函数，而使用.sync则省去了在父组件中定义自定义事件这一步，但需要在触发时加上update

父组件

<template>
    <div>
        <h1>父组件{{  this.activeName  }}</h1>
        <SonPoint @myEvent="changeFather" :activeName.sync="activeName" />
    </div>
</template>

<script>
import SonPoint from '../componentsModule/SonPoint.vue';
export default {
    components: { SonPoint },
    data() {
        return {
            activeName: false
        }
    },
    methods: {
        changeFather() {
            this.activeName = !this.activeName
        }
    }

}
</script>

子组件

<template>
    <div>
        <h1>子组件{{  this.activeName  }}</h1>
        <button @click="changeName">点击改变值</button>
    </div>
</template>

<script>
export default {
    props: {
        activeName: { type: Boolean, default: false }
    },
    methods: {
        changeName() {
            this.$emit('myEvent')
        }
    }
}
</script>

待补充…