月度归档： 2022 年 7 月

Vue 3 兄弟组件间传值

Vue 3 中兄弟间传值可以使用 Vuex，但小项目使用过于庞大，我们可以使用 mitt 进行兄弟组件间传值。

操作步骤

第一步：安装 mitt

npm i mitt

第二步：创建文件（例如：eventBus.js）

import mitt from 'mitt'

const emitter = mitt()
export default emitter

第三步：将该文件引入至需要进行发送及接受的 .vue 文件中

import emitter from "../untils/bus";

第四步：发送端写入下列代码

emitter.emit("response", response)

前面是事件，后面是要传入的参数

第五步：接收端写入下列代码

emitter.on("response", (response) => {
    console.log(response)
})

这样两个组件间就可以进行传值通信了。

Vue 3 锚点实现方式

当我们使用 Vue 3 有时候需要做业内锚点跳转，使用传统的 a href 已经不是很推荐了，我们可以尝试采用以下方法来进行替代

标题锚点

<div class="cardTagContainer">
    <div class="cardTag" v-for="(cardGroup,index) in card.cardInfo" :key="cardGroup" @click="goAnchor('#tag' + index)">
        {{ cardGroup.title }}
    </div>
</div>

跳转内容

<h1 :id="'tag' + index">
    {{ cardGroup.title }}
</h1>

相关方法

// 标题锚点
function goAnchor(selector) {
    // console.log(selector)
    document.querySelector(selector).scrollIntoView({
        behavior: "smooth",
        block: "start"
    });
}

.scrollIntoView 属性方法

该 scrollIntoView() 方法将调用它的元素滚动到浏览器窗口的可见区域。

PS：根据其他元素的布局，元素可能无法完全滚动到顶部或底部。

TIPS：页面（容器）可滚动时才有用！

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)
element.scrollIntoView（alignToTop）; // 布尔参数
element.scrollIntoView（scrollIntoViewOptions）; // 对象参数