element自定义组件实现v-mode效果

原创已于 2024-12-08 10:10:45 修改 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #element #自定义组件

于 2022-11-22 21:23:44 首次发布

vue.js 同时被 2 个专栏收录

6 篇文章

订阅专栏

element

5 篇文章

订阅专栏

本文介绍了一个Vue组件实现双向数据绑定的过程，包括子组件如何通过临时对象与输入控件进行绑定、如何触发数据更新通知父组件，以及父组件如何获取子组件的数据更新。

1）v-model双向绑定

组件：MyTest

<template>
  <div>
    <input type="text" v-model="tempValue" />
    <el-button type="primary" @click="setValue()">组件内部设置</el-button>
  </div>
</template>

<script>
export default {
  name: "MyTest",
  data() {
    return {
      tempValue: this.value,
    };
  },
  model: {
    prop: "value",
    event: "change",
  },
  props: {
    value: {},
  },
  watch: {
    tempValue(val) {
      // 通过 $emit 将 tempValue 的变化通知给父组件
      this.$emit("change", val);
    },
    // 监听父组件的 value 变化，更新内部value
    value(val) {
      this.tempValue = val;
    },
  },
  methods: {
    setValue() {
      this.tempValue = "李四";
    },
  },
};
</script>


<style scoped></style>

页面：Demo

<template>
  <div>
    {{ value }}
    <my-test v-model="value"></my-test>
    <el-button type="primary" @click="setValue()">组件外部设置</el-button>
  </div>
</template>

<script>
import MyTest from '../../components/MyTest';

export default {
  components: { MyTest },
  data() {
    return {
      value: '',
    };
  },
  methods: {
    setValue() {
      this.value = "张三";
    },
  },
  created() { },
};
</script>

2）如果v-model的内容是一个对象，因为是内存引用，就不需要使用v-model，下面是例子

组件：MyTest

<template>
  <div>
    <input type="text" v-model="student.name" />
    <input type="text" v-model="student.address" />
    <el-button type="primary" @click="setValue()">组件内部设置对象</el-button>
  </div>
</template>

<script>
export default {
  name: "MyTest",
  data() {
    return {
    };
  },
  props: {
    // 获取传参
    student: {},
  },
  methods: {
    // 重置对象属性
    setValue() {
      this.student.name = "李四";
      this.student.address = "江苏";
    },
  },
  created() { },
};
</script>

<style scoped></style>

页面：Demo

<template>
  <div>
    {{ student }}
    <my-test :student="student"></my-test>
    <el-button type="primary" @click="setValue()">组件外部设置</el-button>
  </div>
</template>

<script>
import MyTest from '../../components/MyTest';

export default {
  components: { MyTest },
  data() {
    return {
      student: {name:'',address:''},
    };
  },
  methods: {
    setValue() {
      this.student.name = "张三";
      this.student.address = "浙江";
    },
  },
  created() { },
};
</script>