我们有时候在二次封装组件(比如My-dialog)的时候,需要支持原有组件(如element-ui)的El-dialog所有props,然后自己在额外支持一些props,实现自己组件比原组件更加强大的功能。比较朴实的做法就是将用户传递给My-dialog的属性中需要给El-dialog的自己传递过去。

<my -dialog title="标题"></my>
<template>
    <el -dialog :title="title"></el>
</template>
props:{
    title: [String]
}

element-ui的El-dialog组件支持的props都得这样弄的话,是不是得疯了
这种情况我们就需要用到vue的函数式组件和render函数了。

export default {
  name : `MyDialog`,
  functional : true,
  render (createElement, context) {
    return createElement(`el-dialog`, {
        props : {
          ...context.props,
          newProp : `test new prop`,
        },
      }, [
        context.slots().default, //  also pass default slot to child
        createElement(`template`, { slot : `activator` }, context.slots().activator), // passing another named slot (named "activator")
      ]);
  },
};

函数式组件的第二个参数context是一个对象,包含了props, children, slots, data, parent, listeners, injections
本文借鉴了一下文章
https://www.guipss.com/posts/vue-pass-all-props-to-child-component/

https://vuejs.org/v2/guide/render-function.html

分类: Vue

发表评论