2 @update:title=”val => title= val”

Sync =”title” will be extended to @update:title=”val => title= val” :title=”title”

It is convenient for child components to modify the properties of parent components

<! DOCTYPE html><html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <div id="app">
        <div>
            <div>
                <text-document @update:title="val => title = val" :title="title" />
            </div>
            <div>
                <text-document :title.sync="title" />
            </div>
            <div>
                {{title}}
            </div>
        </div>
    </div>
    <script src="./script/vue.js"></script>
    <script>
        Vue.component('text-document', {
            props: ['title'].template: ` 
        
 
         

           {{title}} 
         
 
        
`.methods: {
                setNewTitle: function () {
                    // Manually update the values in the parent component
                    console.log(121)
                    this.$emit('update:title'.'This step modifies the header to implement prop bidirectional binding')}}})var vm = new Vue({
            el: '#app'.data: {
                title: 'Bidirectional binding to prop'}});</script>
</body>

</html>
Copy the code