傳遞所有vue屬性至子元件
阿新 • • 發佈:2018-12-18
我們有時候在二次封裝元件(比如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") ]); }, };