vue中h函数写NSelect
时间: 2024-05-14 08:18:42 浏览: 20
在 Vue 中,可以使用 `h` 函数手动创建组件,下面是一个简单的 `NSelect` 组件的示例:
```js
Vue.component('NSelect', {
props: {
options: {
type: Array,
required: true
},
value: {
required: true
}
},
render(h) {
return h('select', {
on: {
input: event => {
this.$emit('input', event.target.value)
}
}
}, this.options.map(option => {
return h('option', {
domProps: {
value: option.value,
selected: option.value === this.value
}
}, option.label)
}))
}
})
```
在父组件中使用该组件:
```html
<template>
<n-select :options="options" v-model="selected"></n-select>
</template>
<script>
export default {
data() {
return {
options: [
{ label: 'Option 1', value: 'option1' },
{ label: 'Option 2', value: 'option2' },
{ label: 'Option 3', value: 'option3' },
],
selected: 'option1'
}
}
}
</script>
```
这样就可以在父组件中使用 `NSelect` 组件,并且可以通过 `v-model` 双向绑定选中的值。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)