vue.$slots--插槽使用

最新推荐文章于 2024-10-07 14:07:23 发布

huangzhuang1028

最新推荐文章于 2024-10-07 14:07:23 发布

阅读量917

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/huangzhuang1028/article/details/116542354

版权

Vue 插槽命名插槽匿名插槽组件结构

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

插槽：组件中的组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<blog-post>
			  <template v-slot:header>     <!-- 使用v-slot命名插槽 -->
			    <h1>About Me</h1>
			  </template>
			  <p>Here's some page content, which will be included in vm.$slots.default, because it's not inside a named slot.</p>   <!-- 匿名插槽 -->
			  <template v-slot:footer>      <!-- v-slot命名插槽 -->
			    <p>Copyright 2016 Evan You</p>
			  </template>
			<!-- 匿名插槽  一个不带 name 的 <slot> 出口会带有隐含的名字“default”。 -->
			  <p>If I have some content down here, it will also be included in vm.$slots.default.</p>
			</blog-post>
		</div>
		<script>
			//全局注册组件
			 Vue.component('blog-post', {     
            // 使用reader函数进行html页面渲染            
			  render: function (createElement) {
			// 使用$slot获取插槽的节点 获得子虚拟结点
			    var header = this.$slots.header
			    var body   = this.$slots.default
			    var footer = this.$slots.footer
			    return createElement('div', [
			      createElement('header', header),
			      createElement('main', body),
			      createElement('footer', footer)
			    ])
			  }
			})
			var vm = new Vue({ el: '#app' })
		</script>
	</body>
</html>