通過點擊圖示：（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 工具以另一種方式做到這一點嗎？
uj5u.com熱心網友回復：
主要想法是使用像 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>
遵循這個想法，您將能夠隨心所欲地切換元素
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/333213.html
標籤：javascript html css Vue.js dom
下一篇：從磁盤洗掉Ubuntu出現的問題