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

曹振华

已于 2024-12-08 10:10:45 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue.js element 文章标签： vue.js javascript 前端 element 自定义组件

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

本文链接：https://blog.youkuaiyun.com/chadcao/article/details/127990319

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

6 篇文章

订阅专栏

element

5 篇文章

订阅专栏

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

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

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>