<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>从this.$slots获取VNodes列表中的静态内容</title>
</head>
<body>
<div id="app">
<blog-post>
<h2 slot="header"><span>可以从this.$slots获取VNodes列表中的静态内容</span></h2>
<p>这是一个段落</p>
<p slot="footer">版权所有</p>
<p>这是另一个段落</p>
</blog-post>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('blog-post',{
render:function (createElement) {
let header = this.$slots.header;
let body = this.$slots.default;
let footer = this.$slots.footer;
return createElement('div',[
createElement('header',header),
createElement('main',body),
createElement('footer',footer)
])
}
});
let vm = new Vue({
el:'#app',
})
</script>
</body>
</html>
vue-例8-9从this.$slots获取VNodes列表中的内容.html
原创
©著作权归作者所有:来自51CTO博客作者虾米大王的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue-例8-7演示VNodes必须唯一.html
【代码】vue-例8-7演示VNodes必须唯一.html。
javascript vue.js 前端 html Vue -
vue-例8-7演示VNodes必须唯一2.html
【代码】vue-例8-7演示VNodes必须唯一2.html。
javascript vue.js 前端 html Vue -
vue-例8-10使用this.$scopedSlots作用域插槽.html
【代码】vue-例8-10使用this.$scopedSlots作用域插槽.html。
javascript vue.js 前端 html Vue -
vue-例9-1演示Vue路由.html
【代码】vue-例9-1演示Vue路由.html。
javascript vue.js 前端 html Vue -
vue-例9-5演示命名视图.html
【代码】vue-例9-5演示命名视图.html。
javascript 前端 vue.js html ide -
vue-例5-8命名约定.html
【代码】vue-例5-8命名约定.html。
html css css3 bc ci -
vue-例3-9演示v-bind.html
【代码】vue-例3-9演示v-bind.html。
javascript vue.js 前端 html 动态绑定 -
vue-例9-2演示路由传递参数.html
【代码】vue-例9-2演示路由传递参数.html。
javascript vue.js 前端 html Vue -
vue-例9-3演示创建子路由.html
【代码】vue-例9-3演示创建子路由.html。
javascript vue.js 前端 html Vue -
vue-其他列表过渡.html
【代码】vue-其他列表过渡.html。
vue.js javascript 前端 html ci -
vue-例3-13v-model8.html
【代码】vue-例3-13v-model8.html。
javascript 前端 vue.js html Vue -
vue-例8-1使用渲染函数.html
【代码】vue-例8-1使用渲染函数.html。
html servlet dreamweaver h5 Vue -
vue-例2-9计算属性与methods的区别.html
【代码】vue-例2-9计算属性与methods的区别.html。
javascript vue.js 前端 html Vue -
vue-例9-4演示路由切换组件.html
【代码】vue-例9-4演示路由切换组件.html。
javascript html 前端 vue.js Vue -
vue-例3-15number.html
【代码】vue-例3-15number.html。
javascript vue.js 前端 html 字符串 -
vue-例5-20习题.html
【代码】vue-例5-20习题.html。
javascript 前端 html Vue 用户名 -
vue-入门实例9-4.html
【代码】vue-入门实例9-4.html。
vue.js javascript 前端 html Vue