Web前端vue必做笔记之一:使用.syncx修饰符

本文详细介绍了在 Vue.js 中如何使用 .sync 修饰符来实现父子组件间的数据双向绑定。通过示例代码展示了子组件如何通过 $emit 触发更新父组件的属性，以及父组件如何简洁地监听并响应这些变化。文中涵盖了多个实例，包括直接绑定单个属性和整个对象。

Web前端vue必做笔记之一:使用.syncx修饰符

子组件中

<template>
     <div class="document">
           <h1 class="title">{{title}}</h1>
           <div class="content">{{content}}</div>

           <button class="btn" @click="changeTitle">修改标题</button>
           <button class="btn" @click="changeContent">修改内容</button>
     </div>
</template>

<script>
export default {
      props: {
          title:{
              type:String
          },
          content:{
              type:String
          }
      },

      methods:{
            changeTitle(){
                  this.$emit('update:title', '新标题')  
            },
            changeContent() {
                this.$emit('update:content','新内容')
            }
      }
}
</script>

App.vue中

<template>
     <div id="app">
             <document :title="title" @update-title="title = $event"></document>
               <!-- .sync相当于我们把title传进去，同时也去监听title的变化， 可以帮助我们简化上面的代码 -->
             <document :title.sync="title"></document>

            <document :title.sync="doc.title" :content="doc.content" @update-title="doc.title = $event" @update-content="doc.content = $event"></document>

             <document v-bind.sync="doc"></document>
     </div>
</template>

<script>
import Document from './components/document.vue'
export default {
     data(){
           return {
                 title:'初始标题',
                 doc:{        //让doc传递到document中去，让document接收两个参数
                       title:'初始标题',
                       content:'初始内容'
                 }
           }
     },
     components:{
          Document
     }
}
</script>