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)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...
随机推荐
- UiAutoMator一些常用的方法
常用查找UiObject方法 // 通过ID查找public static UiObject findById(String text)throws UiObjectNotFoundException ...
- 安装yum仓库
1.yum仓库是在系统镜像文件里,所以我们要安装yum仓库要把系统镜像文件添加进来: 2.进行挂载配置,并且要使配置永久生效,要进行配置: 3.接下来要创建yum仓库 配置文件: 总结:以上就是安装y ...
- OCP 052最新考试题库和答案收集-34
34.Which two can be backed up by using RMAN when a database Is open in ARCHIVELOG mode, so that medi ...
- toggleClass，toggle切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Connection Timeout和Command Timeout
每次对数据库连接时,我们有时候会碰到连接超时或者命令超时,这两个超时是不一样的.以ADO.NET为例,当客户端和服务器端连接时,碰到的超时情况主要有下面几种: 当从连接池获取一个连接时,碰到超时. 当 ...
- top 常用命令
参考文档: http://www.cnblogs.com/allen8807/archive/2010/11/10/1874001.html [root@linux ~]# top [-d] | to ...
- java内存模型（jMM）(一)
在说java的内存模型之前先简单的了解计算机的主存和缓存的相关概念. 多任务和高并发是衡量一台计算机处理器的重要指标.一般衡量一个服务器性能的高低好坏,使用每秒事务处理数(Transactions P ...
- jupyter notebook 的安装及使用
推荐使用Python3 版本 安装pip3 版本 打开终端输入,安装jupyter notebook(ipython4之后命名) pip3 install jupyter notebook 启动jup ...
- Objective-C语法基础：面向对象编程特点的总结
1.类的声明与实现 Objective-C类的声明要写在@interface 与 @end之间,实现要写在@implementation 与 @end之间 2.类的-方法和+方法 类的-方法即类的实例 ...
- Oracle分析函数、窗口函数简单记录汇总
一.分析函数.窗口函数一般形式 1.分析函数的形式分析函数带有一个开窗函数over(),包含三个分析子句:分组(partition by), 排序(order by), 窗口(rows) ,他们的使用 ...