vue组件插槽--介绍和作用域

插槽介绍

<slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。

实例：

父级组件：

<template>
	<ComponentE>
		<p>插槽内容</p>
	</ComponentE>
</template>

<script>

	import ComponentE from './componentE.vue'
	export default {
		components: {
		    // 局部注册组件
			ComponentE
		  }
	}
</script>

子组件接收插槽内容：

<template>
	<button>
        <div class="main">
           <!--父级组件传过来的插槽数据-->
		   <slot></slot>
        </div>
	</button>
</template>

<script>
	export default{

	}
</script>

渲染结果：

<div class="main">
    <!--父级组件传过来的插槽数据-->
	<p>插槽内容</p>
</div>

渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本身是在父组件模板中定义的。举例来说：

<template>
    <!--子组件定义message对这里不起作用-->
	<span>{{ message }}</span> 
	<ComponentE>
		<p>{{ message }}</p>
	</ComponentE>
</template>

<script>

	import ComponentE from './componentE.vue'
	export default {
		data(){
			return{
				message:'插槽内容',
			}
		},
		components: {
		    // 局部注册组件
			ComponentE
		  }
	}
</script>

这里的两个 {{ message }} 插值表达式渲染的内容都是一样的。

插槽内容无法访问子组件的数据。Vue 模板中的表达式只能访问其定义时所处的作用域，这和 JavaScript 的词法作用域规则是一致的。换言之：

父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/158/1082.html

很赞哦！ (0)