iframe监听时，菜单栏初始状态为放开时，点击按钮可收缩
在菜单栏缩放按钮上绑定两个事件，作为区分是手动改变状态还是自动改变状态。
并使用存储作为判断条件进行判断。最后再刷新时，菜单栏回到放开状态。
⚠️：由于iframe监听传值时会多次触发，iframe有一个销毁事件，但一般可不用，如需避免多次触发，使用命名函数即可。
一个按钮绑定多个点击事件
Vue 中同一个元素可以绑定多个点击事件，且绑定的事件同时触发。
语法如下： 不同方法之间用；隔开。
应用场景：当需要判断一个元素是自动触发还是被动触发时。
<div @click="handleChange(); setSatus()" ></div>
把一个项目的页面引入到另一个项目中，需要用到iframe。当点击子项目中的按钮触发父级项目的事件需要用iframe监听。
（具体描述，当模版点击新建或修改时且左侧菜单栏处于放开状态，进入下一页面时左侧菜单栏收起，返回时恢复放开状态；若菜单栏初始状态为收缩状态，则进入下一页面时不发生改变。）
示例如下：
- 子项目的按钮的页面
methods: { // iframe 回传数据 iframeMessageSendleft () { window.parent.postMessage({ leftMenu: 'no' }, '*') localStorage.setItem('leftMenu', 'no') }, //触发按钮时调用方法 addContentClick () { this.iframeMessageSendleft() } }
- 父项目要触发改变的页面
mounted () { // 刷新后菜单栏是放开状态 window.localStorage.setItem('collapsed', 1) this.initCollapsed() }, methods: { initCollapsed () { const _this = this //（父）接收监听window.addEventListener 命名函数————解决iframe.postMessage()多次触发请求问题 window.onmessage = function (e) { if (e.data && e.data.leftMenu === 'no') { if (window.localStorage.getItem('collapsed') === '1') { _this.handleChange() } } } }, handleChange () { this.$emit('on-change', !this.collapsed) }, // 手动改变菜单栏 setSatus () { if (!this.collapsed) { // 菜单栏缩起 window.localStorage.setItem('collapsed', 0) } else { // 菜单栏放开 window.localStorage.setItem('collapsed', 1) } } } </script>
查看8道真题和解析
