Vue入门基础（slot插槽的使用）

当咱们嵌套的组件须要上级向下级传递页面标签的时候，可使用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>

页面效果