vue v-slot总结

1.插槽是啥啊？？

我们知道，在vue中，引入的子组件标签中间是不允许写内容的。为了解决这个问题，官方引入了插槽(slot)的概念。

插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽以及作用域插槽。

你可能不太明白，为什么我要给子组件中传入HTML，而不直接写在子组件中呢？答案是这样的。你可以想象一个场景，你有五个页面，这五个页面中只有一个区域的内容不一样，你会怎么去写这五个页面呢？复制粘贴是一种办法，但在vue中，插槽(slot)是更好的做法。

（这里我直接用新的写法，什么废弃的东西都不说了，没意义！)

子组件代码：

子组件

父组件代码：

父组件

这一个例子就把匿名插槽和具名插槽说了！

1.匿名插槽：

 在子组件中写一个<slot></slot>占位就可以了！父组件中没固定名字的都会显示在这里 
 #xxx 来给它固定名字

2.具名插槽

简而言之！就和匿名插槽相反么，子组件用<slot name="xxx"><slot>占位，父组件中#后面的和
自组件相同的内容会显示在占位的内容中！

作用域插槽

什么是作用域插槽呢？这么说吧！如果父组件中想要用子组件的数据呢？怎么办呢？

1.用$emit的方法传值给父组件吗？ 可以！但是没必要，太复杂了
2.作用域插槽！

作用域插槽其实就是可以传递数据的插槽。子组件中的一些数据想在父组件中使用，必须通过规定的方法来传递。在官方文档中提出了一条规则，父级模板里的所有内容都是在父级作用域中编译的。子模板里的所有内容都是在子作用域中编译的。如果你在父组件直接使用子组件中的值，是会报错的。

作用域插槽

为了让 子组件中的数据 在父级的插槽内容中可用，我们可以将 数据 作为 元素的一个特性绑定上去：

语法：v-bind:users="user"

● 子组件HelloWorld代码

<template>
  <div class="hello">
     Helloworld组件  
     // 匿名插槽的作用域插槽
     <div class='slotLeft'>
       <slot v-bind:users="user"></slot>
     </div> 

    // 具名插槽的作用域插槽
    <div class='slotLeft'>
       <slot name='helloWorld' v-bind:users="user"></slot>
     </div> 
  </div>
</template>
<script>
export default {
  data(){
    return{
      user:{
        name:'oralinge',
        age:18
      }
    }  
  }
}
</script>

绑定在 元素上的特性（v-bind:users=“user”）被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字。

匿名作用域插槽语法：v-slot:default="随意取的名字" 
 // default可省略，简写为v-slot="随意取的名字"

具名插槽的作用域插槽
与匿名插槽同理，只需要把default替换成插槽的name值即可

● 父组件Home代码

<template>
  <div class="home">
    我是Home父组件

   // 匿名插槽的作用域插槽
    <HelloWorld>
      <template  v-slot:default="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
    </HelloWorld>

   // 具名插槽的作用域插槽
  <HelloWorld>
      <template  v-slot:helloWorld="slotProps">
         <h1>{{slotProps.users.name}}</h1> 
      </template>
   </HelloWorld>

  </div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

注意：

• 父组件中的slotProps可以是随意取的。
• 子组件中users是随意取的，与之对应的是父组件中的users。
• 子组件中的user为数据。