Vue-Render函数理解示例
对应文档节点: https://vuefe.cn/v2/guide/render-function.html#Slots
<body>
<div id="app">
<div class="parent">
<anchored-heading>
</anchored-heading>
</div>
</div>
</body> <script>
Vue.component('child', {
render: function (createElement) {
// <div><slot :text="msg"></slot></div>
//debugger;
return createElement('div', [
this.$scopedSlots.default({
text: this.msg
})
])
},
// template: `
// <div class="child">
// <slot :text="msg"></slot>
// </div>
// `,
data: function () {
return {
msg: "Demo"
}
} }); Vue.component('anchored-heading', {
render(createElement) {
return createElement('div', [
createElement('child', {
// pass scopedSlots in the data object
// in the form of { name: props => VNode | Array<VNode> }
scopedSlots: {
default: function (props) {
debugger;
return createElement('span','hello-'+ props.text)
}
}
})
])
},
// template: `
// <div class="parent">
// <child>
// <template scope="props">
// <span>hello {{ props.text }}</span>
// </template>
// </child>
// </div>
// `
}) new Vue({
el: "#app"
});
</script>
Vue-Render函数理解示例的更多相关文章
- vue render函数 函数组件化
之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- vue render函数解析
一.render 函数的作用: 写一些vue.js的template太繁琐,利用render,可以使用js来生成模板,更加灵活和简便. 二.使用render前提: 官网也说了.在深入渲染函数之前推荐阅 ...
- [转]iview render函数常用总结（vue render函数）
原文地址:https://blog.csdn.net/weixin_43206949/article/details/89385550 iview 的render函数就是vue的render函数ivi ...
- vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...
- Vue render函数 函数时组件 jsx
常规组件使用 定义组件 components/list/list.vue <template> <ul> <li v-for="(item, index) in ...
- 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶
https://blog.csdn.net/wngzhem/article/details/54291024
- iview中table的render()函数
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML.然而在一些场景中,你真的需要 JavaScript 的完全编程的能力,这就是 render 函数,它比 template 更接 ...
- Vue.js之render函数基础
刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
随机推荐
- Python操作配置文件configparser模块
在实际的开发过程中,我们常有操作ini格式和conf格式配置文件的操作,Python为我们提供了configparser模块,方便我们对配置文件进行读写操作. config.ini配置文件内容如下: ...
- day04.2-迭代器
1. 迭代器协议: 对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就引起一个StopIteration异常,以终止迭代(只能往后走,不能往前退). 2. 可迭代对象:实现了迭代器 ...
- 波利亚（Polya)罐子模型
(波利亚(Polya)罐子模型)罐中有a个白球,b个黑球,每次从罐中随机抽取一球,观察其颜色后,连同附加的c个同色球 (波利亚(Polya)罐子模型)罐中有a个白球,b个黑球,每次从罐中随机抽取一 ...
- 原生态js单个点击展开收缩
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- API自动化测试 Soap UI工具介绍
一. 建立测试用例 (一) 基本概念 soapUI 中工程的层次结构 项目名称:位于最上层 (BookStoreTest),项目可以包含多个服务的定义. REST 服务定义:服务其实是对多个 ...
- redis删除指定前缀的缓存
redis作为缓存服务器为MySQL数据库提供较高的防御性,对于一些数据的查询可以直接从缓存中可以进行查询. 但是,某些情况下,我们需要清除缓存. 以下场景: 公司经常做活动,每个活动都存在大量的数据 ...
- js的事件机制二
js的事件机制二 1.给合适的HTML标签添加合适的事件 onchange-----select下拉框 onload-----body标签 单双击-----用户会进行点击动作的HTML元素 鼠标事件 ...
- [转] 设置linux时间为网络时间
[From] https://blog.csdn.net/weixin_35852328/article/details/79506453 Linux的时间分为System Clock(系统时间)和R ...
- python自动化day3-函数、递归、内置函数
一.什么是函数 修理工===>程序员 具备某一功能的工具===>函数 要想使用工具,需要事先准备好,然后拿来就用且可以重复使用要想用函数,需要先定义,再使用 二.函数基础 1.函数分类 # ...
- CSAPP阅读笔记-栈帧-来自第三章3.7的笔记-P164-P176
1.基本结构: 如上图所示,是通用的栈帧结构.大致分两块,调用者函数P和被调用者函数Q. 对P来说,要做的工作是把传递参数中多于6个的部分压栈,随后把Q返回时要执行的下一条指令的地址压栈. 对Q来说, ...