Vue 渲染函数

Posted 2022-11-17 sea-breeze

 

Vue 推荐在绝大多数情况下使用模板来创建你的 html。然而在一些场景中，你真的需要 javascript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

 

一 项目结构

 

 

二 App组件

 

<template>
  <div id="app">
    <fruit fruitName="Durian" :level="2">
      very  delicious!
    </fruit>
  </div>
</template>

<script>
import "./components/Fruit.js";
export default 
  name: "App"
;
</script>

<style lang="scss">
</style>

 

三 Fruit组件

 

import Vue from "vue";
import Durian from "./Durian.vue";
import Mongo from "./Mongo.vue";

Vue.component("fruit", 
  props: 
    fruitName: 
      type: String,
      required: true
    ,
    level: 
      type: Number,
      required: true
    
  ,
  data() 
    return 
      shop: "水果店"
    ;
  ,
  render(createElement) 
    const  fruitName, level, shop, $slots, nativeClickHandler  = this;
    const ele = fruitName === "Durian" ? Durian : Mongo;
    return createElement(
      ele,
      
        class: 
          favorFruit: true
        ,
        style: "color:gold;font-style:italic;",
        attrs: 
          id: "favorFruit"
        ,
        nativeOn: 
          click: nativeClickHandler
        ,
        scopedSlots: 
          shop(props) 
            return createElement("h6", shop);
          
        
      ,
      [createElement("h" + level, fruitName), $slots.default]
    );
  ,
  methods: 
    nativeClickHandler() 
      console.log("native click");
    
  
);

 

四 Durian组件

 

<template>
    <div>
        <slot/>
        <slot name="shop"/>
    </div>
</template>
<script>
export default 
  name: "Durian"
;
</script>

 

五 Mongo组件

 

<template>
    <div>
        <slot/>
        <slot name="shop"/>
    </div>
</template>
<script>
export default 
  name: "Mango"
;
</script>

 

六 运行效果