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>

六 运行效果

Vue 渲染函数的更多相关文章

  1. 从虚拟dom了解vue渲染函数

    vue渲染函数就是render函数,他会返回一个VNode,VNode是一个js对象,是dom的映射 vue在介绍渲染函数那个章节看的不是很懂,所以想要彻底的理解渲染函数,首先需要了解vue的虚拟do ...

  2. Vue渲染函数

    前面的话 Vue 推荐在绝大多数情况下使用 template 来创建HTML.然而在一些场景中,真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更 ...

  3. vue 渲染函数&jsx

    前端更新状态,更新视图,所以性能问题主要由Dom操作引起的,而js解析编译dom渲染就要快得多,  所把要js和html混写. vue 的动态js操作 html  方法:reader函数: vue  ...

  4. vue渲染函数&JSX

    Vue推荐在绝大多数情况下使用template来创建你的HTML.然而在一些场景中,你真的需要JavaScript的完全编程能力,这时你可以使用render函数,它比template跟接近编译器. 虚 ...

  5. 理解Vue中的Render渲染函数

    理解Vue中的Render渲染函数 VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数.比如如下我想要实现 ...

  6. vue从入门到进阶:渲染函数 & JSX(八)

    Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...

  7. Vue:模板&渲染函数学习

    模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...

  8. Vue.js 渲染函数, JSX(未掌握,未学完)

    渲染函数 , JSX(没完成学习) 基础: 实例属性:vm.$slots default 属性包括了所有没有被包含在具名插槽中的节点. 渲染函数: render: function(createEle ...

  9. Vue基础-渲染函数-插槽

    Vue 测试版本:Vue.js v2.5.13 先看个插槽的例子: <div id="app"> <child > <span slot-scope= ...

随机推荐

  1. 008-zabbix监控nginx

    (1)agent端配置 1)nginx编译安装需要加上该选项--with-http_stub_status_module 2)修改nginx配置文件 #vim /usr/local/nginx/con ...

  2. TCP那些事儿

    TCP 的那些事儿(上) TCP 的那些事儿(下)

  3. enums应用详解

    枚举类: 获取枚举相关值:

  4. 「prufer」

    prufer数列,可以用来解一些关于无根树计数的问题. prufer数列是一种无根树的编码表示,对于一棵n个节点带编号的无根树,对应唯一一串长度为n-1的prufer编码. (1)无根树转化为pruf ...

  5. ps制作雾的效果

    制作雾的效果 方法一: 新建图层,将前景色设置为白色,背景色为黑色(因为雾的颜色是根据前景色决定的,也可根据这个原理制作火焰效果) 选择滤镜->渲染->云彩(也可选择其他效果的云彩) (选 ...

  6. Vue给子组件传值为空

    在项目中会遇到的情况.给子组件传值. 子组件页面可以把数据展现出来.可在方法中却获取不到 解决方法: 父组件添加判断,让页面执行完.再把值带过去.

  7. electron-vue 更新 使用electron-update的版本

    electron-vue使用的electron版本比较老,用最新的electron-update会报错 我用这个版本成功 "electron-updater": "^3. ...

  8. 6. ClustrixDB 备份恢复

    ClustrixDB备份恢复:   一.传统MySQL的备份/恢复 shell> mysqldump -u user -h clustrix host --single-transaction ...

  9. ROM和RAM的内存详细说明

    1.首先是ROM 的读取是需要提前两个地址的读取,所以要想读取0地址的数据,你需要给地址是2 2.关于宽度,深度的计算 假设我们要存取如下取模的数据,该模的设置口语描述为:这是显示的2个字节,其中一个 ...

  10. CDOJ 1061 C - 秋实大哥与战争 STL set 迭代器

    题目链接: C - 秋实大哥与战争 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Sub ...