Vue基础-渲染函数-插槽
2024-10-19 17:30:19
Vue 测试版本：Vue.js v2.5.13
先看个插槽的例子：
<div id="app">
<child >
<span slot-scope="props">
{{props.text}}
</span>
</child>
</div>
window.onload = function() {
Vue.component('child', {
template: `
<div>
<slot text="hello from child"></slot>
</div>
`,
});
new Vue({
el: '#app'
});
};
最终效果:
应该比较好理解，如果换成渲染函数，js 就是这样：
window.onload = function() {
Vue.component('child', {
render(createElement){
let vnodes1 = this.$scopedSlots.default({
text: 'hello from child'
});
return createElement('div',[vnodes1]);
}
});
new Vue({
el: '#app'
});
};
前后比较对照下，结合文档，应该能看懂；
但是插槽有很多种形式，具名与否，作用域与否等等，综合在一起，做了个 demo，代码如下：
<div id="app">
<myele>
<div>
default slot
</div>
<div slot="header">
header
</div>
<div slot-scope="props" slot="footer">
<div>footer from parent!</div>
<div>{{props.text}}</div>
</div>
</myele>
<child>
<span slot-scope="props">
{{props.text}}
</span>
</child>
</div>
如果依旧用 template ，js 就是这样：
window.onload = function() {
Vue.component('myele', {
template: `
<div>
<div>vnodes0</div>
<slot></slot>
<slot name="header"></slot>
<slot name="footer" text="footer child value"></slot>
<child>
<span slot-scope="props">{{props.text}}</span>
</child>
</div>
`
});
Vue.component('child', {
render(createElement) {
let vnodes1 = this.$scopedSlots.default({
text: 'hello from child'
});
return createElement('div', [vnodes1]);
}
});
new Vue({
el: '#app'
});
};
效果图：
如果用渲染函数实现，就是这样：
window.onload = function() {
Vue.component('myele', {
render(createElement) {
let vnodes0 = createElement('div', 'vnodes0'),
vnodes1 = this.$slots.default,
vnodes2 = this.$slots.header,
vnodes3 = this.$scopedSlots.footer({
text: 'footer child value'
}),
vnodes4 = createElement('child', {
scopedSlots: {
default: function(props) {
return createElement('span', props.text);
}
}
});
return createElement('div', [vnodes0, vnodes1, vnodes2, vnodes3, vnodes4]);
}
});
Vue.component('child', {
render(createElement) {
let vnodes1 = this.$scopedSlots.default({
text: 'hello from child'
});
return createElement('div', [vnodes1]);
}
});
new Vue({
el: '#app'
});
};
两边一对照，结合文档，应该就比较清楚了
参考文档：
https://cn.vuejs.org/v2/guide/render-function.html#插槽
https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容
最新文章
- powershell
- [Oracle] SQL*Loader 详细使用教程（2）- 命令行参数
- Android PopupWindow 消失后的回掉方法
- light oj 1205 - Palindromic Numbers 数位DP
- C#的Socket简单实现消息发送
- 随便写写，当作了解--Css
- mac删除顽固图标
- wordpress教程之如何修改与制作wordpress的作者页面
- 《彻底搞定C指针》文档整理
- FUDCon - FedoraProject
- get方式提交中文乱码（两次编码，一次解码）
- yii2.0 集成/引入第三方sdk
- clang如何获得程序控制流图
- Python-Django 视图层
- 报错解决——OSError: libdarknet.so: cannot open shared object file: No such file or directory
- python django 访问static静态文件
- 本地IP，掩码，网关，DNS设置
- XStream将XML转javaben，出现多余的tag，导致出错
- H5音乐播放器【歌单列表】
- iOS键盘类型最全