vue插槽是什么（vue中插槽是什么）



一、插槽基本语法

Vue为组件的封装者提供了插槽（slot），插槽是指开发者在封装组件时不确定的、希望由组件的使用者指定的部分。也就是说，插槽是组件封装期间为组件的使用者预留的占位符，允许组件的使用者在组件内展示特定的内容。通过插槽，可以使组件更灵活、更具有可复用性。

1.1定义与使用插槽

在组件中，通过<slot>标签定义插槽，从而在组件中预留占位符。

<slot>插槽的默认内容</slot>

使用插槽即在父组件中使用子组件的插槽，在使用时需要将子组件写成双标签的形式，在双标签内提供插槽内容。

 <子组件>插槽内容</子组件>

1.2具名插槽

在Vue中当需要定义多个插槽时，可以通过具名插槽来区分不同的插槽。具名插槽是给每一个插槽定义一个名称，这样就可以在对应名称的插槽中提供对应的数据了。

插槽通过<slot>标签来定义，<slot>标签有一个name属性，用于给各个插槽分配唯一的名称，以确定每一处要渲染的内容。添加name属性的<slot>标签可用来定义具名插槽。

<slot name="插槽名称"></slot>

在父组件中，如果要把内容填充到指定名称的插槽中，可以通过一个包含v-slot指令的<template>标签来实现，语法格式如下。 其中v-slot:可以简写为#。

<子组件名>

  <template #插槽名称></template>

</子组件名>

1.3作用域插槽

 一般情况下，在父组件中不能使用子组件中定义的数据。如果想要在父组件中使用子组件中定义的数据，则需要通过作用域插槽来实现。作用域插槽是带有数据的插槽，子组件提供一部分数据给插槽，父组件接收子组件的数据进行页面渲染。

在封装组件的过程中，可以为预留的插槽定义数据，供父组件接收并使用子组件中的数据。在作用域插槽中，可以将数据以类似传递props属性的形式添加到<slot>标签上。

<slot message="Hello Vue.js"></slot>

在使用具名插槽时，插槽属性可以作为v-slot的值被访问到，基本语法格式为“v-slot:插槽名称="形参"”，简写形式为“#插槽名称="形参"”，使用简写形式使用插槽的示例代码如下。（在Vue中，每个插槽都有name属性，表示插槽的名称。默认插槽在定义时虽然省略了<slot>标签的name属性，但是name属性默认为default。） 

<MyHeader>

  <template #header="{ message }">

    {{ message }}

  </template>

</MyHeader>

二、代码演示

创建MySlot.vue组件：

创建MySlotFather.vue组件：

浏览器显示结果：

  附本节项目代码下载地址：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/73166.html