如何通过值来定位其他组件元素的dom

Question

点击图标:(Sidebar.vue)

<i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i>

我想切换其他组件中元素的类:

methods: {
toggleMenu() {
document.querySelector(".header").classList.toggle("changeWidth");
document.querySelector(".footer").classList.toggle("changeWidth");
document.querySelector("#app-content").classList.toggle("addOpacity");
document.querySelector(".main-content").classList.toggle("main-content_move-left");
}
}

我可以用另一种方法使用Vue工具吗?

Answer 1

主要思想是使用像Vue这样的框架来管理你的应用程序的状态，我认为你是在遵循旧的路径试图瞄准DOM元素的想法是验证你在你的应用程序中的响应性变化

我建议你阅读更多关于Vue及其工作原理的信息，但一个基本的想法是:

父/子通信:

在这种类型的通信中，父组件通过在组件声明中添加参数将数据传递给子组件。这些叫做props

<template>
<div>
<Car color="green" />
</div>
</template>

Props是单向的:从父级到子级。任何时候父元素改变了prop，新值就会被发送给子元素并重新渲染。

反之则不成立，你永远不应该改变子组件中的prop。

子与父通信

在这种类型的通信中，事件确保从子到父的通信。

<script>
export default {
name: 'Car',
methods: {
handleClick: function() {
this.$emit('clickedSomething')
}
}
}
</script>

当父组件在其模板中包含该组件时，可以使用v-on指令拦截它:

<template>
<div>
<Car v-on:clickedSomething="handleClickInParent" />
<!-- or -->
<Car @clickedSomething="handleClickInParent" />
</div>
</template>
<script>
export default {
name: 'App',
methods: {
handleClickInParent: function() {
//...
}
}
}
</script>

因此，遵循这个概念，你将能够根据某些值渲染你的组件，例如使用v-if指令

<h1 v-if="showHeader">Show your header</h1>
<h1 v-else>Show something else</h1>

按照这个思路，你将能够切换任何你想要的元素