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

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

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

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

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

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

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

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

prop传值

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

http://t.csdn.cn/b7xbC

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

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

示例：

父组件传递参数：

子组件接受参数：

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

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

  template

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

  template

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

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

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

⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇ 

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

TitleTip组件封装：