Deep parsing of Vue modifier sync

Time:2021-8-16

[sync] modifier for bidirectional binding between child components and parent components: in fact, the modifier sync is available in vue1.0. It can realize bidirectional binding between parent and child components, but vue2.0 was removed and restarted after version 2.3.0 was released. Sync can easily realize synchronous modification of parent component values by child components

If the child component wants to modify the value of the parent component, it is recommended to trigger the event in the mode of update: my prop name instead, that is:

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

The v-on: update: title = “Doc. Title = $event” above can essentially be represented by the syntax sugar of sync. Sync is followed by the value to be changed in the parent component. See the example below

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

Recommended Today

Java Engineer Interview Questions

The content covers: Java, mybatis, zookeeper, Dubbo, elasticsearch, memcached, redis, mysql, spring, spring boot, springcloud, rabbitmq, Kafka, Linux, etcMybatis interview questions1. What is mybatis?1. Mybatis is a semi ORM (object relational mapping) framework. It encapsulates JDBC internally. During development, you only need to pay attention to the SQL statement itself, and you don’t need to […]