vue插槽的用法_vue插槽和组件区别

vue插槽的用法_vue插槽和组件区别插槽(Slot)是vue为组件的封装者提供的能力

1.什么是插槽

插槽(Slot)是 vue 为组件的封装者提供的能力。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。

在这里插入图片描述

2.体验插槽的基础用法

在封装组件时,可以通过元素定义插槽,从而为用户预留内容占位符。示例代码如下:

在这里插入图片描述

如果在封装组件时没有预留任何插槽,则用户提供的任何自定义内容都会被丢弃

后备内容

如果组件的使用者没有为插槽提供任何内容,则后备内容(默认内容)会生效。

在这里插入图片描述

3.具名插槽

如果在封装组件时需要预留多个插槽节点,则需要为每个插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下:

在这里插入图片描述

<!-- vue 官方规定:每一个 slot 插槽,都要有一个 name 名称 -->
<!-- 如果省略了 slot 的 name 属性,则有一个默认名称叫做 default -->
<slot name="default">
  <h6>这是 default 插槽的后备内容</h6>
</slot>

3.1为具名插槽提供内容

在向具名插槽提供内容的时候,我们可以在一个元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称。示例代码如下:

在这里插入图片描述

<Left>
  <!-- 默认情况下,在使用组件的时候,提供的内容都会被填充到名字为 default 的插槽之中 -->
  <!-- 1. 如果要把内容填充到指定名称的插槽中,需要使用 v-slot: 这个指令 -->
  <!-- 2. v-slot: 后面要跟上插槽的名字 -->
  <!-- 3. v-slot: 指令不能直接用在元素身上,必须用在 template 标签上 -->
  <!-- 4. template 这个标签,它是一个虚拟的标签,只起到包裹性质的作用,但是,不会被渲染为任何实质性的 html 元素 -->
  <!-- 5. v-slot: 指令的简写形式是 # -->
  <template #default>
      <p>这是在 Left 组件的内容区域,声明的 p 标签</p>
  </template>
</Left>

注意:v-slot指令,只能使用在组件里或template组件里,否则报如下错误

在这里插入图片描述

4.作用域插槽

在封装组件的过程中,可以为预留的插槽绑定 props 数据,这种带有 props 数据的叫做“作用 域插槽”。示例代码如下:

<!-- 在封装组件时,为预留的 <slot> 提供属性对应的值,这种用法,叫做 “作用域插槽” -->
<slot name="content" msg="hello vue.js"></slot>

4.1使用作用域插槽

可以使用 v-slot: 的形式,接收作用域插槽对外提供的数据。示例代码如下:

<template #content="obj">
   <div>
      <p>{
  
  { obj }}</p>
      <p>{
  
  { obj.msg }}</p>
   </div>
</template>
<!-- 页面显示效果: { "msg": "hello vue.js" } hello vue.js -->
<!-- 注意:如果没有传递数据 obj 默认是空对象 {}, obj是一个形参,名字合法就行,建议叫scope(意思就是作用域)-->

4.2解构插槽

可以使用解构赋值简化数据的接收过程。示例代码如下:

<template #content="{ msg }">
   <div>
      <p>{
  
  { msg }}</p>
   </div>
</template>
<!-- 页面显示效果:hello vue.js -->

加深,示例代码:

<!-- Article组件 -->
<slot name="content" msg="hello vue.js" :user="userinfo"></slot>
<script> export default { 
      data() { 
      return { 
      // 用户的信息对象 userinfo: { 
      name: 'zs', age: 20 } } } } </script>
<!-- App组件 -->
<Article>
  <template #content="{ msg, user }">
      <div>
        <p>{
  
  { msg }}</p>
        <p>{
  
  { user.name }}</p>
       </div>
   </template>
</Article>
<!-- 页面显示效果: hello vue.js zs -->

参考资料

今天的文章vue插槽的用法_vue插槽和组件区别分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/74657.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注