【问题标题】:How to target the dom of element of other component by vuevue如何定位其他组件元素的dom
【发布时间】:2021-12-09 07:37:48
【问题描述】:

通过点击图标:(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 工具吗?

【问题讨论】:

    标签: javascript html css vue.js dom


    【解决方案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>
    

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

    【讨论】:

    • 这是关于父母和孩子的。但是,如果我不在侧边栏中使用页眉和页脚怎么办。页眉、侧边栏、页脚在 Layout.vue 中使用。我想从 sidebar.vue 函数切换 header.vue、footer.vue 中的元素类
    • 在这种情况下 Layout.vue 是父组件和页眉、侧边栏和页脚、子组件
    猜你喜欢
    • 2018-07-16
    • 2016-08-02
    • 2020-03-27
    • 2019-05-29
    • 2022-09-25
    • 1970-01-01
    • 2019-06-26
    • 2017-01-03
    • 2019-11-15
    相关资源
    最近更新 更多