道招

传递所有vue属性至子组件

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

传递所有vue属性至子组件

我们有时候在二次封装组件(比如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
更新时间:
上一篇:docker运行WordPress报MySQL server has gong away下一篇:用webpack的require.context() 简化你的代码

相关文章

vue实现自定义组件的v-model双向数据绑定

一般来说我们用v-model是在input中 常见用法如下 &lt;input type="text" v-model="username"&gt; 用户名:{{username}} 其 阅读更多…

关注道招网公众帐号
道招开发者二群