一、子组件之间的通信
1.应用：页面中，不切换路由直接在子组件中切换
通过点击不同的导航，可以切换不同的组件，而且不用切换路由(全程都是一个路由地址)。而特点是调用者和被调用者共享一个父组件，换句话讲，这是子组件之间的通信。
子组件(调用者，导航栏)👇
<template>
<div>
<el-menu style="background-color: bisque;" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item style="background-color: aqua;" index="1" @click="changePage('填入子组件名')">基本资料</el-menu-item>
<el-menu-item style="background-color: blueviolet;" index="2" @click="changePage('填入子组件名')">修改头像</el-menu-item>
</el-menu>
</div>
</template>
<script>
export default {
methods: {
changePage(page) {
this.$emit('page-change', page); // 触发子传父事件，通知父组件页面变化
}
}
}
</script>
父组件：👇
<template>
<div>
<SidebarMenu @page-change="handlePageChange"/>
</div>
</template>
<script>
import sun1 from '~/components/SidebarMenu.vue'; //子组件1
import sun2 from '~/components/Profile.vue'; //子组件2
import sun3 from '~/components/Settings.vue'; //子组件3
export default {
components: { //注册组件
sun1,
sun2,
sun3
},
data() {
return {
currentComponent: 'sun1' //默认显示的子组件
};
},
methods: {
handlePageChange(page) { //切换子组件组件
this.currentComponent = page.charAt(0).toUpperCase() + page.slice(1); // 转换为组件名
}
}
}
</script>
子组件(被调用者，用于展示信息)：👇
<template>
<div>
<span>当前展示的是子组件1</span>
</div>
</template>
<script>
export default {
methods: {
}
}
}
</script>
代码流程👇
二、vue-router 对于管理系统的应用
1.路由配置部分：
顶级路由：制定哪个url展示哪个顶级视图(例如管理系统项目的背板)
一级路由：通常是视图，例如登录页、管理系统主页(包含导航栏等全局组件)
二级路由：局部组件，展示不同路由时可以切换的element-UI组件,在父组件(上级路由)中写作<router-view/>组件。
三、DOM操作
1.原生JavaScript环境与Vue环境下操作DOM的区别
JavaScript通过document.querySelector、document.querySelector这些选择器来获取 DOM 元素；Vue 2通过 ref 属性引用 DOM 元素，避免直接操作全局 DOM
<!-- Vue 2通过`ref`属性引用 DOM 元素 -->
<template>
<div>
<p ref="myElement">原始文本</p>
<button @click="updateText">更新文本</button>
</div>
</template>
<script>
export default {
methods: {
updateText() {
this.$refs.myElement.textContent = '更新后的文本'; // 通过this.$refs访问DOM元素
}
}
}
</script>
2.Vue2中DOM操作的生命周期
DOM 操作应在mounted 钩子或之后执行，确保 DOM 已渲染：
<!-- mounted之前无法执行dom操作 -->
<script>
export default {
mounted() { // 此时DOM已渲染完成，可以安全操作
this.$refs.myElement.textContent = '初始化文本';
}
}
</script>
3.访问子组件的DOM元素
父组件可通过访问子组件 DOM 来调用其方法或访问数据。
<!-- 在monted生命周期后访问其子组件的childMethod()方法 -->
<template>
<ChildComponent ref="childRef" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
mounted() {
// 访问子组件实例
this.$refs.childRef.childMethod(); // 调用子组件方法
}
}
</script>
以上这种组件间通信其实是属于子传父的场景，普通场景下更建议优先考虑使用 $emit 或 VueX这些更规范的方法 。
4.Vue2只能用ref属性访问DOM的场景
在 Vue 2 中，虽然推状态管理、指令来改变数据与交互逻辑，但在某些场景下仍需通过ref直接操作 DOM。以下是常见的必要场景。
（1）必须直接操作 DOM 的第三方库：如 Chart.js、D3、地图库
（2）特殊的DOM API： Canvas、文件输入、媒体元素
（3）非 Vue 生态的插件：日期选择器、富文本编辑器
<!-- 示例：文件上传 -->
<template>
<input type="file" ref="fileInput" @change="handleFile">
</template>
<script>
export default {
methods: {
handleFile() {
const file = this.$refs.fileInput.files[0];
// 处理文件...
}
}
}
</script>
