使用v-model 封装自己的下拉框组件

最新推荐文章于 2023-12-20 06:36:43 发布

一只金牛座的崽

最新推荐文章于 2023-12-20 06:36:43 发布

阅读量171

点赞数

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

本文链接：https://blog.csdn.net/weixin_43456275/article/details/129390020

版权

自定义组件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文章展示了如何在Vue.js中创建一个自定义的下拉框组件，使用v-model进行双向数据绑定。组件内部通过监听change事件更新父组件的数据，并通过$emit(input)传递值。输入列表(inputList)包含选项a,b,c，初始选中值为c。

摘要由CSDN通过智能技术生成

v-model 封装自己的下拉框组件

    {{ selectVal }}
    <my-select v-model="selectVal"></my-select>
	data() {
	    return {
	      selectVal: "c",
	    };
  },

MySelect组件

<template>
  <div>
    <select :value="value" @change="changeSelect">
      <option v-for="item in inputList" :key="item" :value="item">
        {{ item }}
      </option>
    </select>
  </div>
</template>
<script>
export default {
  props: ["value"],
  data() {
    return {
      inputList: ["a", "b", "c"],
    };
  },
  mounted() {},
  methods: {
    changeSelect(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>
<style lang="scss" scoped></style>