传递所有vue属性至子组件
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
传递所有vue属性至子组件
<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- 分类:
- Web前端
更新时间:
相关文章
vue实现自定义组件的v-model双向数据绑定
一般来说我们用v-model是在input中 常见用法如下 <input type="text" v-model="username"> 用户名:{{username}} 其 阅读更多…