Record视频笔记 / VUE / Part2 组件插槽slot

INtikoo

于 2022-01-18 16:53:18 发布

阅读量591

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_53931380/article/details/122562608

版权

本文介绍了Vue.js中的插槽机制，包括默认插槽、具名插槽和作用域插槽的用法。插槽提供了一种父组件向子组件传递内容的方式，允许父组件定制子组件内部的HTML结构。

摘要由CSDN通过智能技术生成

一种组件间通信的方式，父组件可以向子组件指定的位置插入html结构。

1、默认插槽<slot>

父组件中：（填土）

<template>
  <div class="total">
    <search>
        <h1>需要在组件search里插入的结构<h1/>
    </search>
  </div>
</template>

子组件中：(挖坑）

<template>
  <div class="search">
    //定义插槽
    <slot>插槽默认内容..</slot>
  </div>
</template>

2、具名插槽<slot name="xxx">

父组件中：（填土）

<template>
  <div class="total">
    <search>
        <template slot="one">
            <h1>需要在组件search里插入的

关注