vue slot知识点总结

---

前言

本文主要记录在学习vue slot中的一些知识点，给各位朋友分享的同时也提高自己

---

一、基本用法：组件的基本用法

//App.vue
<template>
   <div id="nav">
	 <Home>
 	 	 <button>父组件按钮</button>//如果按钮里面的内容没有写，就会被提前声明好的slot里面的默认内容替换
	 </Home>
   </div>
</template>


<script>
import Home from "./components/Home.vue"
export default {
    data(){
    	return {};
    },
   components:{
 	  Home
     }
}
</script>

//Home.vue
<template>
   <div>
		 <h2>主页</h2>
			 <slot>默认</slot>//这里声明的slot会被上面调用组件中使用的标签自动替换，如上面的结果会得到一个button
  </div>
</template>
<script >
export default {
   data() {
   	 return {};
   },
  components: {},
};
</script>

二、组件的作用域

//在哪里定义的变量或事件就在那里应用，和slot在那里放没关系
例如在上面的button中添加事件
<button @click="triggerEvent">父组件按钮</button>

在home.vue和app.vue中添加方法triggerEvent
//app.vue
triggerEvent(){
      console.log("这里是父组件！")
    }

//home.vue
 triggerEvent(){
      console.log("这里是子组件！");
    }

结果如下：

三、具名插槽的使用

//不适用具名插槽的效果
//App.vue
<template>
  <div id="nav">
    <Home>
      <button @click="triggerEvent">父组件按钮</button>
    </Home>
    <Home>
      <button @click="triggerEvent">父组件按钮</button>
    </Home>
    <Home>
      <button @click="triggerEvent">父组件按钮</button>
    </Home>
  </div>
</template>

//home.vue
<template>
  <div>
    <h2>主页</h2>
    <slot></slot>//定义了三个插槽接口，没有具名的情况下三个插槽的名字都是default，最后会将每一个传递过来的内容都注入到default默认插槽中
    <slot></slot>
    <slot></slot>
  </div>
</template>

效果：

处理方法：

//在使用组件的地方用template包裹起来，v-slot：内容绑定到具体的那个插槽中
//App.vue
  <Home>
      <template v-slot:home>//v-slot可以简写成为#
        <button @click="triggerEvent">家组件按钮</button>
      </template>
    </Home>
    <Home>
      <button @click="triggerEvent">默认组件按钮</button>
    </Home>
    <Home>
      <template #student>
        <button @click="triggerEvent">学生组件按钮</button>
      </template>
    </Home>

//home.vue
	 <slot name="home"></slot>
	 <slot></slot>//默认插槽名字可以不写
  	 <slot name="student"></slot>

效果如下：

四、插槽的props数据传递

//Home.vue
<slot name="home" id="1" title="家组件"></slot>//在子组件的插槽上写上数据

//App.vue
<template #home="slotProps">
   <button @click="triggerEvent1(slotProps)">家组件按钮</button>
</template>

结果如下

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要分享的内容，本文仅仅简单介绍了slot的使用，而要详细的了解插槽的知识可以看官网，官网文档是最好的手册（ps：只不过对新手小白来说体验较差）。