当我们嵌套的组件需要上级向下级传递页面标签的时候,可以使用slot
Slotdemo.vue
<template >
<div class="Slotdemo">
<!--name 对应上级的slot="" -->
<slot name="title"></slot>
<span>===================</span>
<slot name="content"></slot>
</div>
</template>
<script>
//js 逻辑部分
export default {
name: 'Slotdemo',
data() {
return {
};
}
}
</script>
<style scoped>
</style>
App.vue
<template>
<div id="app">
<Slotdemo>
<!--slot标签到一下级 style可以当前vue定义或者下级定义 但引用属性变量不行-->
<div slot="title">
<p>我是app vue的title
<!--引用当前属性 再slot到一下级-->
<h2>{{title}}</h2>
</p>
</div>
<h1 slot="content">我是app vue的content</h1>
</Slotdemo>
</div>
</template>
<script>
//注册局部组件
//1 引入组件
import Slotdemo from './components/Slotdemo.vue'
export default {
name: 'app',
components: { //2 注册组件
Slotdemo
},
data(){
return{
title:"title 是上级的变量"
};
},
methods:{
}
}
</script>
<style>
</style>
页面效果