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)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
随机推荐
- code::blocks学习
code::block不能调试问题 今天在codeblock不能进行调试,百度总结如下: 1 进行调试的必须是一个project而不能是一个单一的cpp文件. 2 project的路径不能包含中文,尽 ...
- Linux下对于makefile的理解
什么是makefile呢?在Linux下makefile我们可以把理解为工程的编译规则.一个工程中源文件不计数,其按类型.功能.模块分别放在若干个目录中,makefile定义了一系列的规则来指定,那些 ...
- Android 中 DrawerLayout + ViewPager 怎么解决滑动冲突？
DrawerLayout 是 Android 官方的侧滑菜单控件,而 ViewPager 相信大家都很熟悉了.今天这里就讲一下当在 DrawerLayout 中嵌套 ViewPager 时,要如何解决 ...
- [spring] Ioc 基础
Ioc的理解:调用类对某一接口的实现类的依赖关系又第三方注入,以移除调用类对接口实现类的依赖.又叫做依赖注入.调用者对接口的选择权利被剥夺,交给了第三方.举个例子,学生本来可以选择哪个老师给他上课的, ...
- iOS 本地时间、UTC时间、时间戳等操作、获取当前年月日
//获得当前时间并且转为字符串 - (NSString *)dateTransformToTimeString { NSDate *currentDate = [NSDate date];//获得当前 ...
- 2016级算法第一次练习赛-C.斐波那契进阶
870 斐波那契进阶 题目链接:https://buaacoding.cn/problem/870/index 思路 通过读题就可以发现这不是一般的求斐波那契数列,所以用数组存下所有的答案是不现实的. ...
- Android Fragment实现微信底部导航
1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...
- bzoj2959: 长跑(LCT+并查集)
题解 动态树Link-cut tree(LCT)总结 LCT常数大得真实 没有环,就是\(lct\)裸题吧 有环,我们就可以绕环转一圈,缩点 怎么搞? 当形成环时,把所有点的值全部加到一个点上,用并查 ...
- HDU - 4866 主席树 二分
题意:在x轴\([1,X]\)内的上空分布有n个占据空间\([L_i,R_i]\),高度\(D_i\)的线段,射中线段的得分为其高度,每次询问从x轴的\(x\)往上空射的最近k个线段的总得分,具体得分 ...
- Kamailio
http://www.kamailio.org/wiki/cookbooks/4.1.x/core IMS 支持接口 MSC接口,信令:ISUP over IP和SIP, 用户面: rtp协议 PCR ...