vue如何定位其他组件元素的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 及其工作原理的更多信息，但基本思想是：

亲子交流：

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

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

道具是单向的：从父母到孩子。每当父级更改道具时，都会将新值发送给子级并重新渲染。

反之则不然，你永远不应该在子组件中改变一个 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>

按照这个想法，您将能够随心所欲地切换元素