vue中.sync修饰符

vue中.sync修饰符

.sync 修饰符的作用就是实现父子组件数据双向绑定，与v-model类似

  <info :pvalue.sync="myValue"></info>

   this.$emit("update:pvalue",200)//点击改变子组件绑定属性值，从而改变父组件值myValue

注意: .sync修饰符可以在一个组件内使用多次,但在vue2中v-model在一个组件内只能使用一次

eg:======================================================================

父组件：

<template>
    <info :pvalue.sync="myValue"></info><!--info子组件-->
</template>
<script>
    inport info from './info.vue';
    export default {
        components: {info},
        data() {
            return {
                myValue: 1234,
            }
        },
    }
</script>

子组件：

<template>
    <div>
        <button @click="hClick"/>
    </div>
</template>
<script>
export default {
    props: {
        pvalue: {type: String}
    },
    methods: {
        hClick() {
          this.$emit("update:pvalue",200)
        }
    }
}
</script>