sync修饰器的作用是什么

　　首先看到 .sync 我们需要知道这是个修饰器 类似修饰器还有 .stop .prevent 之类

　　其实这个修饰符就是vue封装了 子组件要修改父组件传过来的动态值的语法糖，省去了父组件需要写的方法，但是子组件emit时要加上update

　　在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源

　　代码解释

　　// 这里父组件，要给子组件传一个title的值

<template>

    <div>  

        <t-title :title.sync="fatherTitle"></t-title>

    </div>

</template>

<script>

import tTitle from './blocks/list';

export default {

    name: 'test1',

    components: {  tTitle },

    data() {

        return {

            fatherTitle: '父组件给的标题'

        };

    },

}

</script>

// 子组件

<template>

    <div>

        <h3>{{ title }}</h3>

        <button @click="changeTitle">改变</button>

    </div>

</template>

<script>

export default {

    props:{

        title: {type: String, default: '默认值11'}

    },

    methods: {

        changeTitle() {

            this.$emit("update:title", "子组件要改自己的标题");

        }

    }

};

</script>

　　这里关键就是emit里的参数要写成'update'+ ':' +'要修改的props'

　　以前是用的this.$emit("自定义方法")

　　更多关于“前端培训”的问题，欢迎咨询千锋教育在线名师。千锋已有十余年的培训经验，课程大纲更科学更专业，有针对零基础的就业班，有针对想提升技术的好程序员班，高品质课程助力你实现程序员梦想。