vue中解决组件中,子组件被复用时,需要在特定的区域,定义不同的内容时

小桃子~

已于 2022-09-12 20:19:45 修改

阅读量550

点赞数 5

文章标签： vue.js 前端 javascript

于 2022-08-17 20:47:24 首次发布

本文链接：https://blog.csdn.net/m0_61692295/article/details/126393999

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 父子通信 -->
			<dx-component
			v-for="item in items"
			:key="item.id"
			
			:name="item.name"
			:price.sync="item.price"
			>
			
			</dx-component>
			<!-- 添加用slot插槽接收 -->
			<dx-component>
				<a href="https://www.baidu.com">点击跳转百度</a>
			</dx-component>
		</div>
	</body>
	<script src="../js/vue.js"></script>
	<script>
		Vue.component("dx-component",{
			props:["name","price"],
			template:`
				<div>
					<span>{{name}}</span>
					<span>{{price}}</span>
					<span>
						<slot></slot>
					</span>
				</div>
			`
		})
		
		new Vue({
			el:"#app",
			data(){
				return {
					items:[
						{id:1,name:"张三",price:1},
						{id:2,name:"李四",price:2},
						{id:3,name:"王五",price:3},
					]
				}
			}
		})
	</script>
</html>

命名插槽

1.<slot> 元素有一个特殊的 name 特性，可以用于定义除默认插槽以外的多余插槽：
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>
2.在父组件模板的 <template> 元素上使用 slot 特性
<base-layout>
  <template slot="header">
    <h1>这里是一个页面标题</h1>
  </template>

  <p>main 内容的一个段落。</p>
  <p>main 内容的另一个段落。</p>

  <template slot="footer">
    <p>这里是一些联系信息</p>
  </template>
</base-layout>