AI文库-您身边的智能助手,如没有想要的内容请与本站万能的AI助手联系。

封装一个可以在父组件用v-model的原生select组件

来自 上海市上海市 的网友 时间: 热度:21°C 加入收藏 我要投稿 点赞(0)
首先,我们需要创建一个自定义的原生Select组件,然后在父组件中使用v-model进行双向绑定。

1. 创建自定义Select组件(CustomSelect.vue):

```html
<template>
<select :value="value" @change="onChange">
<option v-for="(option, index) in options" :key="index" :value="option.value">
{{ option.label }}
</option>
</select>
</template>

<script>
export default {
props: {
value: {
type: [String, Number],
required: true
},
options: {
type: Array,
default: () => []
}
},
methods: {
onChange(event) {
this.$emit('input', event.target.value);
}
}
};
</script>
```

2. 在父组件中使用自定义Select组件(ParentComponent.vue):

```html
<template>
<div>
<custom-select v-model="selectedValue" :options="options"></custom-select>
</div>
</template>

<script>
import CustomSelect from './CustomSelect.vue';

export default {
components: {
CustomSelect
},
data() {
return {
selectedValue: '',
options: [
{ label: '选项1', value: '1' },
{ label: '选项2', value: '2' },
{ label: '选项3', value: '3' }
]
};
}
};
</script>
```

这样,我们就创建了一个可以在父组件用v-model的原生select组件。
221381
领取福利

微信扫码领取福利

微信扫码分享

直接下载
单次下载
0.5元/次
支付宝支付
2.免费下载(每天3次)
公众号:控分学霸复制
复制微信公众,搜索即可关注!
扫一扫关注公众号
欢迎使用微信支付
扫一扫支付
金额:
常见问题

请登录之后再下载!

下载中心

您的账号注册成功!密码为:123456,当前为默认信息,请及时修改

下载文件立即修改

帮助中心

如何获取自己的订单号?

打开微信,找到微信支付,找到自己的订单,就能看到自己的交易订单号了。

阅读并接受《用户协议》
注:各登录账户无关联!请仅用一种方式登录。


用户注册协议

一、 本网站运用开源的网站程序平台,通过国际互联网络等手段为会员或游客提供程序代码或者文章信息等服务。本网站有权在必要时修改服务条款,服务条款一旦发生变动,将会在重要页面上提示修改内容或通过其他形式告知会员。如果会员不同意所改动的内容,可以主动取消获得的网络服务。如果会员继续享用网络服务,则视为接受服务条款的变动。网站保留随时修改或中断服务而不需知照会员的权利。本站行使修改或中断服务的权利,不需对会员或第三方负责。

关闭