Vue-Render函数理解示例
2024-09-16 00:56:36
对应文档节点: 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>
最新文章
- oracle--trunc与to_char的区别
- hdu 4763 kmp ***
- 通过ReentrantLock源代码分析AbstractQueuedSynchronizer独占模式
- js的数组操作 splice
- Web Uploader文件上传&&使用webupload有感（黄色部分）
- Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)
- System.Rtti.TRttiObject.GetAttributes 简例
- GB2312 Unicode转换表实现跨平台utf8转码unicode
- PullToRefreshListView调用onRefreshComplete方法 无法取消刷新的bug
- 下载doxygen
- zoj2977Strange Billboard (国家压缩+罗列)
- Oracle数据库中的重要对象
- php 下载文件
- -bash: /etc/profile: line 11: syntax error near unexpected token `$'{\r''报错问题解决
- mysql+redis+memcached
- Springboot Download file
- SparkSQL和DataFrame
- ajax参考增删改查
- mysql 表格操作指令大全（Show、desc、create、insert into、delete、select、drop、update、alter）
- 命令行参数解析函数getopt和getopt_long函数【转】