具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<title>具名插槽</title>
</head>
<body>
	<div id="root">
		<child content="hello">
			<p class="header" slot="header">header</p>
			<p class="footer" slot="footer">footer</p>
		</child>
	</div>

	<script type="text/javascript">

		Vue.component(‘child‘,{
			props:{
				content:String,
			},
			template:`	<div>
							<slot name="header">
								<h1>default 默认值</h1>
							</slot>
							<p>{{this.content}}</p>
							<slot name="footer">3</slot>
						</div>`
		})

		var vm = new Vue({
			el:"#root",
		})
	</script>
</body>
</html>

  

  

原文地址:https://www.cnblogs.com/xuwupiaomiao/p/12079980.html

时间: 2024-10-31 00:50:57

具名插槽的相关文章

饿了么表格二次封装具名插槽append的分装实现

1)在封装组件中使用table具名插槽,并自定义具名插槽,对外开发使用:commonTable <template> <div class="common-table-style"> <el-table :data="tableData" tooltip-effect="dark" border highlight-current-row :max-height="maxHeight" :empt

具名插槽、作用域插槽的新写法

插槽 具名插槽 自 2.6.0 起有所更新.已废弃的使用 slot attribute 的语法 但是我们有了新的语法,如下: 子组件 childCom: <template id="childCom"> <div> <!-- 具名插槽的针对于组件中不止一个插槽的情况下使用,使用方式,即:给每个插槽指定 name 属性,在使用的时候需要给标签设置 slot 属性,且属性值为 对应的 name 属性的属性值 --> <slot name='left

436 vue slot:插槽基本使用,具名插槽,作用域插槽

1. 插槽 : 替换内容 / 分发内容 (1)占位,像出口<router-view></router-view>. (2)没有新的内容放进来,就用默认的. (3)<slot></slot>将被替换成组件内的对应子节点. 2. 基本使用 <el-car> <div>宝马发动机</div> </el-car> 组件的内部 02-插槽的基本使用.html <!DOCTYPE html> <html

具名插槽 slot (二)

slot 是父组件与子组件的通信方式可以将父组件的内容显示在子组件当中或者说可以将 让你封装的组件变的更加的灵活,强壮! 在子组件中  通过为多个slot进行命名.来接受父组件中的不同内容的数据  这就是命名插槽 插槽slot与slot之间不能有html元素 但是html可以把插槽包裹起来 所以插槽可以动态向子组件传递值 子组件 <template> <div> <h1>我是组件</h1> <h2>我是组件中显示的内容</h2> &l

vue 插槽slot

本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-footer> </app> 注意两点: <app> 组件不知道它会收到什么内容.这是由使用 <app> 的父组件决定的. <app>

插槽的使用

父组件向子组件传递DOM 不具名插槽,如下: 父组件的内容如下: 1 <template> 2 <div id="app"> 3 <home> 4 <p>hello lanyb</p> //父组件往子组件中插入的内容 5 </home> 6 </div> 7 </template> 子组件中的内容如下: 1 <template> 2 <div> 3 hello wor

vue slot插槽的使用

slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子组件传递的元素的样式时,只能在对应的子组件进行修改 1.具名插槽的使用  父组件 <template slot="header"> <p>我是头部</p> </template> 子组件 <slot name="header"

Vuejs之Component slot 插槽详解

Vuejs的component的数据进行了沙箱隔离,除js全局变量如Math, Date之类外无法访问用户自定义的变量,所以使用component写组件或嵌套组件时明白变量的访问非常重要 编译作用域 在看componnent的使用之前,来看下component编译作用域,明白作用域范围才能顺利写出想要的组件 假设我们有一个组件child-component,在父组件中代码如下: <child-component> {{ message }} </child-component> 编

87 全局和局部组件, 子父和父子之间的通信 混入 插槽 路飞导航栏

主要内容: 1  全局组件: a : 定义一个全局组件 Vue.component( 'global-component', { template: `<div> 注意: template一定要包一层div <h3>{{wanrong}}</h3> <h2>{{wanrong}}</h2> </div>`, data() { return { wanrong: 'hello', } } } ); 2  全局组件的使用的两种方式: a: