当前位置：首页 > article >正文

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

article 2025/1/19 8:10:46

原本：父组件使用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>