编程知识 cdmana.com

Deep analysis of Vue modifier sync

Implement the bidirectional binding between child component and parent component 【sync】 Modifier : Actually sync The modifier is vue1.0 There is , It can realize the bi-directional binding of parent-child components , however Vue2.0 Removed , until 2.3.0 After release , Start again ,【.sync】 It's very easy to implement child component synchronization and modify the value of parent component

If the child component wants to modify the value of the parent component , Recommended to update:my-prop-name The pattern triggers events instead of , That's it :


 Parent component 
<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
---------------------------------------------------------------
 Child components 
this.$emit("update:title".newTitle)

And the top one v-on:update:title="doc.title = $event", In essence, you can use sync This grammatical sugar means ,.sync What follows is the value in the parent component that needs to be changed , Take a look at the example below to experience


 Parent component 
<template>
    <div>
        <child-com :value.sync="text" ></child-com>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                text:" The value of the parent component ",
            }
        },
    }
</script>
==================================================================================
// Modify the value of the parent component in the child component 
<template>
    <div @click="post"></div>
</template>
 
<script>
    export default{
        methods:{
            post(){
                this.$emit('update:value'," The value of the subcomponent ")
            }
        }
    }

版权声明
本文为[Aslan]所创,转载请带上原文链接,感谢

Scroll to Top