vue插槽slot,用法及作用

日期：2021-08-08 21:14:49 浏览：169

Vue插槽的作用就是存放内容

当我们在子组件内没有书写slot标签时,父组件内书写<One></One>里面的内容是无效的

v-slot写在template标签上,新语法

一 :当父组件v-slot后面定义的名字在子组件内name属性后面的名字找不到时,父组件template标签内的内容默认不显示

二: 当父组件v-slot后面没有定义名字时,系统默认定义为default (即 v-slot:defalut) ,他会去匹配子组件slot标签没有名字的

三 : v-slot可以用#代替,作用是一样的

<template #two>
      <a href="#">提交啦</a>
</template>

四: 子组件的数据传递到父组件内容

v-slot:four,和子组件的<slot name="four"></slot>要相同

父组件

  <One>
//我们定义一个subdata变量,(变量名随意),用来接收子组件内传递过来的数据
    <template v-slot:four="subdata">
//users为子组件内的变量名
      <a href="#">{{  subdata.users.name }}</a>
    </template>
  </One>

子组件

<template>
  <h6>{{ title }}</h6>
//这里的:users为定义的变量名,父组件接收时要用到
  <slot name="four" :users="users"></slot>
</template>

<script>
export default {
  name: "One",
  data:()=>{
    return {
      title:"我是ONE组件的标题",
      users:{
        name:'提交吧'
      }
    }
  }
}
</script>

总结

template v-slot =后面定义的名字和slot标签name定义的值,如果没有找到,优先显示<slot></slot>标签的内容,如何找到就显示template里面的内容

Tags: vue