[Vue @Component] Control Template Contents with Vue's Render Function
Declaring templates and elements inside of templates works great for most scenarios. Sometimes you need a bit more control over what your component will do with the props and children it receives, so Vue provides a render
function that allows you complete programmatic control over every argument using JSX.
We have a parent component which renders:
<Content slot="content" :limit="4">
<div><img src="https://robohash.org/mindy?set=set4" alt=""></div>
<div><img src="https://robohash.org/john?set=set4" alt=""></div>
<div><img src="https://robohash.org/kim?set=set4" alt=""></div>
<div><img src="https://robohash.org/joel?set=set4" alt=""></div>
<div><img src="https://robohash.org/maggie?set=set4" alt=""></div>
</Content>
Content.vue:
<script>
import { shuffle } from "lodash"
export default {
functional: true,
render: (createElement, { children, props, data }) => {
if(props.limit) {
return createElement('div', data, shuffle(children.slice(0, props.limit)));
} else {
return createElement('div', data, shuffle(children));
}
}
}
</script>
You can also using JSX:
[Vue @Component] Control Template Contents with Vue's Render Function的更多相关文章
- [Vue @Component] Define Props on a Vue Class with vue-property-decorator
While traditional Vue components require a data function which returns an object and a method object ...
- Vue.js—组件快速入门及Vue路由实例应用
上次我们学习了Vue.js的基础,并且通过综合的小实例进一步的熟悉了Vue.js的基础应用.今天我们就继续讲讲Vue.js的组件,更加深入的了解Vue,js的使用.首先我们先了解一下什么是Vue.js ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 聊聊Vue.js的template编译
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- Vue中使用Vue.component定义两个全局组件,用单标签应用组件时,只显示一个组件的问题和 $emit的使用。
解决方法: 定义了两个 Vue.component 在 el 中使用的时候要用 双标签, 用单表标签的时候,只会显示第个 组件间 这样写只显示 welcome-button 组件 <welcom ...
- Vue学习笔记 template methods,filters,ChromeDriver,安装sass
ChromeDriver installation failed Error with http(s) request: Error: connect ETIMEDOUT 172.217.160.80 ...
- 使用 Vue.component
引入 vue.js. HTML <div id="app"></div> CSS .greeting { padding: 3rem 1.5rem; bac ...
- vue.extend和vue.component的区别
vue.extend 使用基础 Vue 构造器函数,通过原型继承,(返回)创建一个"子类"(构造器).参数是一个包含组件选项的对象. const Sub = function Vu ...
- Vue Component Registration All In One
Vue Component Registration All In One Vue 注册自定义组件 <template> <div class="back-to-top-c ...
随机推荐
- 向listview控件中添加数据库数据
//连接字符串 string str = "Data Source=.;Initial Catalog=mu;User ID=sa;Password=111"; //创建数据库连接 ...
- js中将html文档写入静态界面当中
1.静态界面当中: <div id="test"></div> 2.在js当中写入 $("#test").append(html文档内容 ...
- 专题九:实现类似QQ的即时通信程序
引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net类库去实现它们的.为了让大家更好的理解我们平常中常见的软件QQ的工作原理,所以在 ...
- 读《An Adaptable and Extensible Geometry Kernel》
读<An Adaptable and Extensible Geometry Kernel> 利用Curiously Recurring Template Pattern替代虚函数 详细内 ...
- java树型结构的数据展现设计
在做一个需求管理的页面时,需求的展现是不限层级树型结构,需求下还可以分拆任务,页面要展现的字段有20多个,而且需求采用通用表单设计,db采用大宽表存储,有一百多个字段.目前数据量不大,第一版采用普通的 ...
- C/c++中 数组全局变量的定义声明 与 引用声明
数组声明一次,所有的 定义声明 有切仅有一次! 别人遇到的问题如下: 在声明定义时,定义数组如下: int G_glob[100]; 在其他文件引用时声明如下: int *G_glob; 这样的操 ...
- Error parsing D:\sdkforas\android-sdk-windows\system-images\android-22\android-wear\x86\devices.xml
今天在工作过程中向Android Studio中导入一个项目,最后运行出现如下错误: Cannot reload AVD list: cvc-enumeration-valid: Value '280 ...
- spring加载classpath与classpath*的区别别
1.无论是classpath还是classpath*都可以加载整个classpath下(包括jar包里面)的资源文件. 2.classpath只会返回第一个匹配的资源,查找路径是优先在项目中存在资源文 ...
- es6常用的语法
刚开始用vue或者react,很多时候我们都会把ES6这个大兄弟加入我们的技术栈中.但是ES6那么多那么多特性,我们需要全部都掌握吗?秉着二八原则,掌握好常用的,有用的这个可以让我们快速起飞. 接下来 ...
- 梦想CAD控件网页版关于自定义命令
在CAD控件操作中,为方便使用者,使用自定义命令发出命令,完成CAD绘图,修改,保存等操作.点击此处在线演示. _DMxDrawX::RegistUserCustomCommand 向CAD控件注册一 ...