通过VUE3快速指定主菜单链接修改<iframe>src

VUE通过可以在单个文件中快速进行组件定义而后通过<componentName />的方式直接插入所需要的页面，这是它渐进式的一个重要原因组件功能也是vue的重要功能。
以下案例使用# Ant Design Vue组件库。
首先安装组件库npm i --save ant-design-vue@4.x
在main.js文件中全局引入组件库，因为这里是示例直接全局引入，如果在生产环境中可以考虑引入使用到的组件避免不必要的资源占用。

import './assets/main.css'
import App from './App.vue'
import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);

app.use(Antd).mount('#app');

定义菜单栏组件（官网直接拷贝引入）

\\template标签写入HTML
<template>
    <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" style="width: 200px"
        :mode="state.mode" :items="items" :theme="state.theme" @click="handleMenuClick"></a-menu>
</template>

\\script标签写入JvavScript
<script setup>
import { h, reactive } from 'vue';
import {
    CheckCircleOutlined,
    CameraOutlined,
    HighlightOutlined,
    FileDoneOutlined,
    EditOutlined,
} from '@ant-design/icons-vue';
const state = reactive({
    mode: 'inline',
    theme: 'light',
    selectedKeys: ['1'],
    openKeys: ['sub1'],
});
function getItem(label, key, icon, children, type) {
    return {
        key,
        icon,
        children,
        label,
        type,
    };
}
const items = reactive([
    getItem('name1', '1', h(CheckCircleOutlined)),
    getItem('name2', '2', h(HighlightOutlined)),
    getItem('name3', '3', h(FileDoneOutlined)),
    getItem('name4', '4', h(CameraOutlined)),
    getItem('name5', '5', h(EditOutlined)),
]);
</script>

\\style标签写入CSS
<style scoped></style>

监听事件

在vue中v-on 指令 (简写为 @) 来监听 DOM 事件

 //使用@click监听
 <template>
 <a-menu v-model:openKeys="state.openKeys" v-model:selectedKeys="state.selectedKeys" style="width: 200px"
        :mode="state.mode" :items="items" :theme="state.theme" @click="handleMenuClick">
 </template>

<script>
//通过自定义发射 defineEmits([]) 宏来声明它要触发
const emit = defineEmits(['menuClick']);
// 菜单点击处理函数：声明常量不能被重新赋值，函数名称，使用SE6的对象解构({})提取key
const handleMenuClick = ({ key }) => {
  // 通过标签的key定义链接映射
  const urlMap = {
    '1': 'http://192.168.10.65:10020',
    '2': 'http://192.168.10.65:10021',
    '3': 'http://192.168.10.65:10022',
    '4': 'http://192.168.10.65:10023',
    '5': 'http://192.168.10.65:10024'
  };

  // 向父组件发送事件，传递对应的URL
  emit('menuClick', urlMap[key]);
};
</script>

定义响应式的iframe

首先使用<componentName />的将组件插入app主页
还需要监听子组件事件 VUE中的监听与组件与 prop 一样，事件的名字也提供了自动的格式转换。注意这里我们触发了一个以 menuClick 形式命名的事件，但在父组件中可以使用 menu-click 形式来监听。
另外我们还用到VUE中的{ref}方法：接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

<template>
<!-- 监听子组件发出的 menuClick 事件 -->
<componentName @menu-click="handleMenuChange" />
<!-- ## v-bind动态的绑定一个或多个属性attribute，也可以是组件的 prop。:属性也是此方法的缩写 -->
<iframe id="iframe" name="iframe" :src="iframeSrc" width="100%" height="700px" ></iframe>
</template>
<script setup>
//引入ref方法
import { ref } from 'vue';
//引入组件文件
import Homelise from './layouts/componentName.vue';
// 定义响应式的 iframe src
const iframeSrc = ref('http://192.168.10.65:10020');
// 处理菜单点击事件，更新 iframe 的 src，点击时将会替换为key对应的url
const handleMenuChange = (url) => {
  iframeSrc.value = url;
};
</script>