关于 vue 自定义 v-model
来源:16-1 补充说明
希卡利
2020-09-16
轻问一下 v-model 要怎么样能才能在 函数式组件中传递呀?或者有类似解决方案?
多问一句,我有好几个组件很相似,有类似于 class 继承的那种方案吗?还是说只能用 mixins ?
// main.vue
<div v-for="(material, index) in actualOptions.materials" :key="material.id">
<material
v-model="actualOptions.materials[index]"
@materialEvent="handleMaterialEvent"
/>
</div>
// material.vue
<script>
import Image from './components/Image.vue'
export default {
name: 'WlMaterial',
functional: true,
props: {
// 单项组件的数据
data: {
type: Object,
default() { return {} }
},
},
render(h, context) {
// 组件集合
const components = {
Image
}
// 结构出 数据 & 样式 & 事件
const {
props: {
dataStyle,
data
},
listeners
} = context
// 需要传入的数据
const props = {
data,
isEdit: true
}
// 根据数据渲染不同的组件
// 想在这里渲染的组件中 传递 v-model
return h(
// 组件名
components[data.name],
// 属性
{
// 事件
on: { materialEvent: listeners.materialEvent }
}
)
}
}
</script>
写回答
1回答
-
扬_灵
2020-09-16
同学你好,v-model可以通过属性传递的方式函数式组件中传递,vue中好像没有类似于 class 继承的这种方案,如果有几个组件类似的可以试着考虑封装成一个公共的组件。
00
相似问题