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为数据。

推荐阅读更多精彩内容