组件的双向绑定

最新推荐文章于 2024-12-04 10:11:55 发布

沈忘年

最新推荐文章于 2024-12-04 10:11:55 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

文章标签： java 前端服务器

本文链接：https://blog.youkuaiyun.com/ShenWangNian/article/details/131580654

该文章展示了一个Vue.js应用中父组件与子组件之间的通信示例。父组件传递数据syncText给子组件，并监听其更新，子组件通过方法sendToFather()修改接收到的数据并触发父组件的更新。

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

这是父组件的内容：

<template>
  <div>
    <div @click="setChild">我是父元素：{{ msg }}</div>
    <Child :syncText.sync="msg" />
  </div>
</template>

<script>

import Child from "@/views/Child";

export default {
  name: "index",
  data() {
    return {

      msg: "AAA"
    }
  },
  components: {
    Child
  },
  methods: {

    setChild() {
      this.msg += 2;
    },

  }
}
</script>

这是子组件的内容：

<template>
  <div  @click="sendToFather()">我是子元素：{{ syncText }}</div>
</template>

<script>
export default {
  name: "Child",
  props: ["syncText"],
  methods: {
    sendToFather() {
      this.$emit("update:syncText", this.syncText + 1);
    },
  },
}
</script>