Vue2的v-bind.sync

Jin Zhiming — Thu, 10 Nov 2022 02:29:57 +0000

This is the parent component!

<template>    
<div>    　　
  <children v-bind:title.sync="title"/>    
</div>
</template>
<script>
export default {
　　data(){
　　　　return{
　　　　　　　title:"学习vue2"
　　　  }　　
    }
}
</script>

2.This is the children component!We all know that the props that a parent component sends to a child cannot be changed. However, using this method you can change the props that a parent component sends to a child!

<template>
    <div>
        <span>标题:{{title}}</span>
        <el-button @click="update">点击修改</el-button>
    </div>
</template>
<script>
    export default {
        name:"children",
        data(){
            return{}
        },
        props:{
            title:String
        },
        methods:{
            update(){
                this.$emit("update:title",'发生改变')
            }
        }
    }
</script>
<style></style>

However, this api was deprecated at vue3！^_^

DEV Community: Jin Zhiming

Vue2的v-bind.sync