关于 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可以通过属性传递的方式函数式组件中传递,//img1.sycdn.imooc.com/szimg/5f61d9ae09753dc115901118.jpgvue中好像没有类似于 class 继承的这种方案,如果有几个组件类似的可以试着考虑封装成一个公共的组件。

0
0

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程,一套中小型企业通用的后台管理系统

2829 学习 · 1714 问题

查看课程