vue插槽，具名插槽、作用域插槽

vue插槽

1、具名插槽

具有名字的插槽，使用的時候可以根據名字插入到具體要插入的元件中的相應位置

//子元件(Son)
<div>
  <p>這是該元件固定的内容</p>
   //留給引用此元件，想要添加自己内容的
  <v-slot name='title'></slot>
</div>

//父元件
<Son>
    <template v-slot='title'>
        //v-slot可以簡寫為#,#title
        //往該元件添加我想加的内容
        <h1>我添加的title為：具名插槽的使用</h1>
    </template>
</Son>

           

2、作用域插槽

可以拿到封裝元件時綁定的資料，資料類型是一個對象{}

//子元件
<template>
  <div>
    <p>我是Artical元件</p>
    //在封裝元件時，為預留的<slot>提供屬性對應的值，這種做法，叫做“作用域插槽”
    <slot name="title" :user="userList"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: {
        name: "張三",
        age: 22,
        sex: "男",
      },
    };
  },
};
</script>
           

//父元件
<script>
// 引入元件
import Artical from "./components/Artical.vue";

export default {
  name: "App",
  components: {
    Artical
  }
</script>
  
  
<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope }}</p>
      </template>
    </Artical>
  </div>
</template>
結果：{ "user": { "name": "張三", "age": 22, "sex": "男" } }
           

<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope.user }}</p>
      </template>
    </Artical>
  </div>
</template>
結果：{ "name": "張三", "age": 22, "sex": "男" } 

           

<template>
  <div id="app">
    <Artical>
      <template #title="scope">
        <p>{{ scope.user.name }}</p>
      </template>
    </Artical>
  </div>
</template>
結果：張三