Vue3学习记录

一、引言

        由于之前做项目使用过Vue2，目前项目需要使用Vue3来开发，今天对于几个日前遇到的小问题进行梳理记录。

二、ref使用的基础

        在script标签中：直接定义ref() 函数创建一个响应式引用时，它会返回一个包含了一个响应式属性 value 的响应式对象。这个响应式对象是一个普通的 JavaScript 对象，它的初始值是 undefined。这个定义的值可以直接在标签中通过插值语法进行使用；此处还有另一种情况需要注意，当在标签中定义了一个ref，例如`<div ref="echartsRef">gamePlay</div>`，在script标签中，通过 const echartsRef = Ref()可以去到该对象，需要注意的是定义的名称必须和模板里的 ref 同名。相关内容可以看官方文档的模板引用部分：模板引用 | Vue.js (vuejs.org) | Vue.js (vuejs.org)

        代码示例如下：   

<div ref="mydiv" style="height: 400px; width: 500px">111</div>

const mydiv = ref();
console.log("1111==",mydiv)
const mydiv2 = ref();
console.log("2222==",mydiv2)

        对于这段示例来说，mydiv对应的元素为ref为mydiv的元素，但是mydiv2则就是一个空对象。

三、如何修改element原生样式问题

        Vue2.x版本使用优先级` /deep/ > >>>`
        Vue3版本使用::`v-deep`
        在vue中，深度选择器>>>,/deep/和::v-deep都是>>>的别名，在scss中不识别/deep/, 可以使用::v-deep
        对于如何修改页面上想要修改的元素：以修改el-collapse-item标签title（element组件折叠面板为例）：
        F12打开控制面板，选择你想要修改的文字，可以看到它的class元素组成，如果它的直接给定固定值，那么需要借助`v-deep`来实现，如果它的值又来源于其他引用，我们可以通过修改其引用的值来实现。 

        代码如下：

      <el-col :span="12">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item
            v-for="item in noticeData"
            :key="item.id"
            :title="item.name"
            :name="item.id"
          >
            <div style="padding:0 20px;">
              <strong>公告内容：</strong>
              {{ item.content }}
            </div>
            <div style="padding:0 20px;">
              <strong>发布时间：</strong>
              {{ item.pubDate }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </el-col>

.el-collapse-item{
  --el-collapse-header-font-size: 16px;
  
}
::v-deep .el-collapse-item__header{
  font-weight: 550;
}