vue中.sync修饰符的使用

最新推荐文章于 2025-07-02 10:36:52 发布

原创最新推荐文章于 2025-07-02 10:36:52 发布 · 1.2w 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种在Vue.js中实现子组件修改父组件数据的方法。通过使用自定义事件和props的同步语法，子组件可以将数据变化通知给父组件，实现数据的双向绑定。具体实践包括定义父组件中的数据属性和子组件中的事件处理器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景需求：在父组件data里定义一个变量page，我们希望在子组件里改变这个变量并传给父组件。

在父组件里：

  <template>
    <v-pagination :page.sync="page></v-pagination>
  </template>
  <script type="text/ecmascript-6">
    export default {
      data() {
        return {
          page: 1
        }
      }
    }  
  </script>

在子组件里：

<template>
  <div class="pagination">
    <el-pagination
      background
      :pager-count="11"
      layout="prev, pager, next"
      @current-change="currentChange"
      :total="totalNum">
    </el-pagination>
  </div>
</template>
<script type="text/ecmascript-6">
  export default {
    methods: {
      currentChange(page) {
        this.$emit('update:page', page)
      }
    }
  }
</script>