1. 程式人生 > >傳遞所有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")
      ]);
  },
};