<!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>
扫一扫
10-27
4515
4515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
