封装小组件（prop传值，设置动态属性值）

STATICHIT静砸
202 阅读3分钟

​

项目中有个小地方虽然写起来不麻烦，但是也有那么二十几行代码，且几乎每个子页面的根页面都有这个部分，且不同之处只是两个字段内容，所以我对其进行了封装。

就按照图片的样式直接书写代码的话是这样子的：

<!-- 子页面 ———— 数据安全/服务器端加密-->
<template>
  <div>
    <div>
    <h4 class="title">服务器端加密</h4>
    <el-popover
      class="more"
      placement="top-start"
      title="功能提示"
      :width="width"
      trigger="hover"
      content="服务器端加密机制为静态数据提供保护。适合于对于文件存储有高安全性或者合规性要求的应用场景。例如，深度学习样本文件的存储、在线协作类文档数据的存储。"
    >
      <template #reference>
        <el-icon><Tickets /></el-icon>
      </template>
    </el-popover>
  </div>
  </div>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.title {
  float: left;
  line-height: 15px;
  margin-right: 7px;
}
.more {
  float: left;
}
</style>

由于多个页面拥有这个部分，为了降低代码冗余度，进行了TitleTip组件的封装

（使用到该组件的页面直接传入标题，提示，提示内容和宽度即可(可以只传入部分)）

该组件由两部分组成，一个是

标签，设置了该页面的标题

一个是element-plus的提示框组件，当鼠标悬停于图标上时会出现提示框便于用户理解功能

使用到的知识点组要是两个 一个是prop传值 ，一个是v-bind动态设置属性值

prop传值

前几天刚学习了setup语法糖中的defineProps传值

t.csdn.cn/b7xbC

defineProps
defineProps ----> [用来接收父组件传来的 props]

通过defineProps指定当前 props 类型，获得上下文的props对象。

示例：

父组件传递参数：

<template>
  <div class="box">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>
 
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
let msg='今天是2023年3月14日'
 
</script>

子组件接受参数：

<template>
    <div>
        <h2> 啦啦啦啦啦啦啦啦</h2>
        <p>信息: {{ info}}</p>
        <p> {{ time }}</p>
    </div>
</template>
 
<script lang="ts" setup>
 
import {defineProps} from 'vue'
 
defineProps({
    info:{
        type:String,
        default:'----'
    },
    time:{
        type:String,
        default:'0分钟'
    },
})
 
</script>

v-bind动态设置属性值

v-bind

动态的绑定一个或多个 attribute，也可以是组件的 prop。

  • 缩写：: 或者 . (当使用 .prop 修饰符)

  • 期望：any (带参数) | Object (不带参数)

  • 参数：attrOrProp (可选的)

  • 修饰符：

    • .camel - 将短横线命名的 attribute 转变为驼峰式命名。
    • .prop - 强制绑定为 DOM property。
    • .attr - 强制绑定为 DOM attribute。

  • 用途：

    当用于绑定 class 或 style attribute，v-bind 支持额外的值类型如数组或对象。详见下方的指南链接。

    在处理绑定时，Vue 默认会利用 in 操作符来检查该元素上是否定义了和绑定的 key 同名的 DOM property。如果存在同名的 property，则 Vue 会把作为 DOM property 赋值，而不是作为 attribute 设置。这个行为在大多数情况都符合期望的绑定值类型，但是你也可以显式用 .prop 和 .attr 修饰符来强制绑定方式。有时这是必要的，特别是在和自定义元素打交道时。

    当用于组件 props 绑定时，所绑定的 props 必须在子组件中已被正确声明。

    当不带参数使用时，可以用于绑定一个包含了多个 attribute 名称-绑定值对的对象。

  • 示例：

    template

    <!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

<!-- 动态 attribute 名 -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 缩写形式的动态 attribute 名 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定对象形式的 attribute -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- prop 绑定。“prop” 必须在子组件中已声明。 -->
<MyComponent :prop="someThing" />

<!-- 传递子父组件共有的 prop -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    .prop 修饰符也有专门的缩写，.：

    template

    <div :someProperty.prop="someObject"></div>

<!-- 等同于 -->
<div .someProperty="someObject"></div>

    当在 DOM 内模板使用 .camel 修饰符，可以驼峰化 v-bind attribute 的名称，例如 SVG viewBox attribute：

    template

    <svg :view-box.camel="viewBox"></svg>

    如果使用字符串模板或使用构建步骤预编译模板，则不需要 .camel。

展示封装完毕代码的缩减量：​编辑

（不封装这点小东西这二十几行代码啊每个页面都得写！！！）

⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

（封装这小东西只需要一行代码和几个string值！！！）

TitleTip组件封装：

​

​

avatar
文章
阅读
粉丝