Vue2 父子组件某一属性的双向绑定

咸鱼肥美妖娆

已于 2024-03-17 14:32:11 修改

阅读量417

点赞数 6

文章标签： javascript vue

于 2024-03-13 23:45:34 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51754096/article/details/136694716

版权

本文介绍了如何在Vue应用中，从使用props直接传递值给子组件，转变为利用computed和$event进行更灵活、便捷的数据交互，以简化组件间的通信过程。

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

原本：父组件使用props传值给孩子组件初始化，触发事件子组件使用$emit传值给父组件，很麻烦
后来：使用computed和$event
例子代码：

<template>
  <div class="box">
    grandpa <el-input v-model="model.title"></el-input>
    <Father :titleProp="model.title" @handleInput:titleProp="model.title = $event" />
  </div>
</template>

<script>
import Father from "./Father.vue";
export default {
  data() {
    return {
      model: {
        title: "",
      },
    };
  },
  components: {
    Father,
  },
  methods: {
    handleInput(val) {
      this.model.title = val;
    },
  },
};
</script>

<template>
  <div class="father" ref="father">
    father <el-input v-model="title"></el-input>
  </div>
</template>

<script>
export default {
  computed: {
    title: {
      get() {
        return this.$props.titleProp;
      },
      set(value) {
        this.$emit("handleInput:titleProp", value);
      },
    },
  },
  props: {
    titleProp: String,
  },
  methods: {},
};
</script>