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)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
随机推荐
- 29.Combination Sum（和为sum的组合）
Level: Medium 题目描述: Given a set of candidate numbers (candidates) (without duplicates) and a targe ...
- “全栈2019”Java第十一章：标识符
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- [Swift]在Swift中实现自增(++)、自减(--)运算符：利用extension扩展Int类
自增(++).自减(--)运算符主要用在For循环中,Swift有自己更简易的循环遍历方法,而且类似x- ++x这种代码不易维护. Swift为了营造自己的编码风格,树立自己的代码精神体系,已经不支持 ...
- CentOS加入Windows域
CentOS加入Windows域,为减少操作已经提前关掉了selinux,防火墙.并且更改了主机名 yum install nss-pam-ldapd -y 第一步:更改主机名为linux.itxd ...
- 安装php，nginx 带debug
gdb安装包 在CentOS6.4下使用gdb进行调试的时候, 使用bt(breaktrace)命令时,会弹出如下的提示: 头一天提示: Missing separate debuginfos, ...
- ubuntu下Android反编译详细教程-apktool，dex2jar，jd-gui的使用
转载请注明出处:http://blog.csdn.net/fightlei/article/details/52432161 最近在学习Android反编译的一些知识,虽然在网上搜到了很多相关的文章, ...
- [BZOJ 4857][Jsoi2016]反质数序列
传送门 $ \color{green} {solution : } $ 因为 $ 1 $ 的个数我们最多只能选一个,所以剩下的数如果组成素数那么只有一奇一偶,显然是个二分图模型 #include &l ...
- P1001 A+B Problem (树链剖分)
这题考验我们构造模型的能力. 考虑构造一棵树,树上有3个节点,节点1和节点2连一条权值为a的边,节点1和节点3连一条权值为b的边,显然答案就是节点2到节点3的最短路径. 但这样还不够.考虑加法的性质, ...
- springboot(十)-监控应用
微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...
- EntityFramework First,FirstOrDefault,Single,SingleOrDefault的区别
操作符 如果源序列是空的 源序列只包含一个元素 源序列包含多个元素 First 抛异常 返回该元素 返回第一个元素 FirstOrDefault 返回default(TSource) 返回该元素 返回 ...