vue中使用slot分发内容

责编:menVScode 2017-11-15 22:46 阅读(1013)

vue中使用slot分发内容

        使用一种方式混合父组件的内容与子组件自己的模板,这种过程被称为“内容分发”。在子组件中使用特殊的<slot>元素作为内容的插槽。

        这样会使组件的可扩展性更强。

单个slot

        在子组件模板中有slot标签,被视为备用内容,在父组件不提供内容的情况下使用。如果父组件提供内容,则把整个内容片段插入到slot所在的DOM位置,并替换掉slot标签本身。

        页面渲染出"这是第1个提醒",而自定义标签内的内容"我是html结构"不会被渲染。

<div id="app">
	<custom>
		<div>我是html结构</div>
	</custom>
</div>
<script>
	Vue.component("custom",{
		template:`
			<div>
				<p>这是第1个提醒</p>
			</div>
		`
	})
	new Vue({ el:"#app"});
</script>

        "我是html结构"就会被渲染在<slot>标签所在的位置,而<slot>标签内能写默认结构,比如:<slot><b>1111</b></slot>。

<div id="app">
	<custom>
                <!-- 当写在自定义标签之间的内容 要混合子组件中的模板 -->
		<div>我是html结构</div>
	</custom>
</div>
<script>
	Vue.component("custom",{
		template:`
			<div>
                                <slot></slot>
				<p>这是第1个提醒</p>
			</div>
		`
	})
	new Vue({ el:"#app"});
</script>

        模板中p标签的内容被替换掉。

<div id="app">
	<custom><!-- 当写在自定义标签之间的内容 要混合子组件中的模板 -->
		<div>我是html结构</div>
	</custom>
</div>
<script>
	Vue.component("custom",{
		template:`
			<div>
                                <slot>
				    <p>这是第1个提醒</p>
                                </slot>
			</div>
		`
	})
	new Vue({ el:"#app"});
</script>


具名slot

        <slot>元素可以用一个特殊的属性name来配置如何分发内容。

        可以使用一个匿名的slot,处理那些没有对应slot的内容。

<div id="app">
	<custom>
		<!-- 当写在自定义标签之间的内容 要混合子组件中的模板 -->
		<div slot="one">替换第1给提醒</div>
		<div slot="three">替换第3给提醒</div>
		<div slot="two">替换第2给提醒</div>
		<div slot="two">替换第2给提醒</div>
		<div>替换无名的slot</div>
	</custom>
</div>
<script>
	Vue.component("custom",{
		template:`
			<div>
				<slot name="one"><p>这是第1个提醒</p></slot>
				<slot name="two"><p>这是第2个提醒</p></slot>
				<slot name="three"><p>这是第3个提醒</p></slot>
				<slot>无名的slot</slot>	
			</div>`
	})
	new Vue({ el:"#app" });
</script>

        结果为:

替换第1给提醒
替换第2给提醒
替换第2给提醒
替换第3给提醒
替换无名的slot

        也可以用内置的template标签进行批量插入替换。

<div id="app">
	<h2>自定义组件</h2>
	<custom>
		<div slot="one">替换第1给提醒</div>
		<div slot="three">替换第3给提醒</div>
		<template slot="two">
			<div>替换第2给提醒</div>
			<div>替换第2给提醒</div>
			<div>替换第2给提醒</div>
			<div>替换第2给提醒</div>
			<div>替换第2给提醒</div>
			<div>替换第2给提醒</div>
		</template>
		<div>替换无名的slot</div>
	</custom>
</div>


编译作用域

        父组件模板的内容在父组件作用域内编译。

        子组件模板的内容在子组件作用域内编译。

<div id="app">
	<custom>
		<!--渲染的数据是父组件中的数据-->
		{{message}}
	</custom>
</div>
<script>
	// 父组件模板的内容在父组件作用域内编译;
       //子组件模板的内容在子组件作用域内编译
	Vue.component("custom",{
		data(){
			return {
				message:"我是子组件的数据"
			}
		},
		template:`
			<div>
				{{message}}
				<p>我是第1个提醒</p>
				<slot></slot>
			</div>
		`
	})

	new Vue({
		el:"#app",
		data:{
			message:"我是父组件的数据"
		}
	});

        渲染结果:

我是子组件的数据
我是第1个提醒
111我是父组件的数据
标签: slot vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码