实现子组件与父组件双向绑定的【sync】修饰符:其实sync这个修饰符是vue1.0就有的,它能够实现父子组件的双向绑定,然而Vue2.0被移除了,直到2.3.0版本公布后,又从新开始启用,【.sync】能够很轻松的实现子组件同步批改父组件的值

如果子组件想批改父组件的值,举荐以update:my-prop-name 的模式触发事件取而代之,也就是这样:

父组件<text-document  v-bind:title="doc.title"  v-on:update:title="doc.title = $event"></text-document>---------------------------------------------------------------子组件this.$emit("update:title".newTitle)

而上边的 v-on:update:title="doc.title = $event",实质上就能够用sync这个语法糖来示意,.sync前面紧接的就是父组件中须要被扭转的值,看下边的例子领会一下

父组件<template>    <div>        <child-com :value.sync="text" ></child-com>    </div></template><script>    export default{        data(){            return {                text:"父组件的值",            }        },    }</script>==================================================================================//子组件中批改父组件的值<template>    <div @click="post"></div></template> <script>    export default{        methods:{            post(){                this.$emit('update:value',"子组件的值")            }        }    }