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)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
随机推荐
- Django-02路由层
U RL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于客户端发来的某个URL调用哪一段逻辑代 ...
- CF1106F Lunar New Year and a Recursive Sequence（矩阵快速幂+bsgs+exgcd）
题面 传送门 前置芝士 \(BSGS\) 什么?你不会\(BSGS\)?百度啊 原根 对于素数\(p\)和自然数\(a\),如果满足\(a^x\equiv 1\pmod{p}\)的最小的\(x\)为\ ...
- 简单的数字校验JS
/** *张衍涛 * 数字校验 v:校验的元素 l:要保留的小数点位数 */ function checkNumber(v,l){ var val=v.value; if(isNaN(val) || ...
- 扩展欧拉定理【洛谷P4139】 上帝与集合的正确用法
P4139 上帝与集合的正确用法 \(2^{2^{2^{\dots}}}\bmod p\) 卡最优解倒数第一祭. 带一下扩展欧拉定理就好了. code: #include <iostream&g ...
- js常见报错解决方法
1.获得类名document.getElementsClassName(常出现一个问题): getClassName("gn","pt")[0].appendC ...
- GPUImage处理图片(滤镜)
GPUImage 是基于 GPU 处理图像的一个开源库, 提供了各种图像处理滤镜,例如调 亮度/饱和度/曝光度/白平衡/锐化等滤镜. 并且支持照相机/摄像机 的实时滤镜. GPUImage采用链式方式 ...
- WeakHashMap源码分析
WeakHashMap是一种弱引用map,内部的key会存储为弱引用, 当jvm gc的时候,如果这些key没有强引用存在的话,会被gc回收掉, 下一次当我们操作map的时候会把对应的Entry整个删 ...
- python高级（一）—— python数据模型(特殊方法)
本文主要内容 collections.namedtuple __getitem__ 和 __len__ __repr__和__str__ __abs__.__add__和__mul__ __bool_ ...
- leetcode 44 字符匹配
题意:s是空串或包含a-z字母: p为包含a-z字母或?或 * (其中*可以匹配任意字符串包括空串,?可以匹配任意字符). 思路: 1)特殊情况:当s为空串时,p为连续 * 时,则连续 * 的位置都为 ...
- rocketmq的消息过滤-sql方式
通常我们会使用Tag过滤 特殊情况下我们也可以使用userproperties+TAGS过滤 , sql92定义 这两种都是在服务器端完成过滤, 对于超大数据量的场景(1小时4000W+)不要在客流端 ...