DEV Community

Jin Zhiming
Jin Zhiming

Posted on

Vue2的v-bind.sync

  1. This is the parent component!
<template>    
<div>      
  <children v-bind:title.sync="title"/>    
</div>
</template>
<script>
export default {
  data(){
    return{
       title:"学习vue2"
     }  
    }
}
</script>
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)