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>

頁面效果