vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路

Sync修饰符

在 Vue 2.x 中,v-model 的 .sync 修饰符允许子组件更新一个 prop 的值,并通知父组件重新渲染。这在父子组件通信中非常有用。

父组件:

javascript 复制代码
<template>
  <div>
    <child-component :title.sync="parentTitle"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentTitle: '初始标题'
    };
  }
}
</script>

子组件:

javascript 复制代码
<template>
  <button @click="updateTitle">更新标题</button>
</template>
 
<script>
export default {
  props: ['title'],
  methods: {
    updateTitle() {
      this.$emit('update:title', '新标题');
    }
  }
}
</script>

在这个例子中,当子组件的按钮被点击时,它会发出一个 update:title 事件,并传递一个新的标题。父组件监听这个事件并更新其 parentTitle 数据属性。这样,你就实现了数据的双向绑定。

iframe切换前提示保存功能的实现思路

实现思路:

主页面与iframe页面进行通信。

在切换其他菜单时,主页面向iframe页面发送switchTab的消息,如果iframe页面返回消息noSwitchTab,那么主页面的切换菜单函数不执行,进行缓存。如果iframe页面需要继续之前的中断的切换逻辑,那么发送restoreSwitchTab消息给主页面,那么主页面继续之前的切换菜单的函数。

点击切换菜单组件代码:

javascript 复制代码
 onMenuSelect(name){
             let vm = this;
             window.global.postSaveMsg(this.onMenuSelectCallback.bind(vm),name)
        },

主页面代码:

javascript 复制代码
    data:{
      isSwitchTab:true,
      lastSwitchTabInfo:{},
    },

  window.addEventListener('message', e => {
            let config = e.data;
            if(e.data.noSwitchTab){
                vm.isSwitchTab = false;
            }
            if(e.data.restoreSwitchTab){
                vm.isSwitchTab = true;
                if(vm.lastSwitchTabInfo && vm.lastSwitchTabInfo.func){
                    vm.lastSwitchTabInfo.func(vm.lastSwitchTabInfo.args);
                    vm.lastSwitchTabInfo = {};
                }
            }
      },
    postSaveMsg(func,args){
            let vm = this;
            window.global.isSwitchTab = true;
            window.global.lastSwitchTabInfo = {};
            vm.postMessage();
            setTimeout(() => {
               if (window.global.isSwitchTab) {
                  func(args);
               }else{
                   window.global.lastSwitchTabInfo = {func:func,args:args};
               }
            }, 200);
    },
     postMessage(){
            let dom = document.getElementById('centerContentIframe') 
            if(dom && dom.children && dom.children.length){
                document.getElementById('centerContentIframe').children[0].contentWindow.postMessage({
                    type:"switchTab",
                    id: 'centerContentIframe',
                    switchTab: true
                });
            }
        },

iframe页面代码

javascript 复制代码
mounted(){
        let vm =this;
        window.addEventListener("message", function (e) {
            const postData = {noSwitchTab:true};
            window.parent.postMessage(postData,"*");

            let config = {
                title: "当前内容未保存,是否保存?",
                width:'440',
                onOk: () => {
          
                },
                onCancel:()=>{
                    const postData = {restoreSwitchTab:true};
                    window.parent.postMessage(postData,"*");
                }
            };
            vm.$Modal.confirm(config);
        });
   
    },
相关推荐
万邦科技Lafite8 小时前
如何对接API接口?需要用到哪些软件工具?
java·前端·python·api·开放api·电商开放平台
知识分享小能手8 小时前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
看晴天了8 小时前
🌈 Tailwind CSS 常用类名总结
前端
看晴天了8 小时前
Tailwind的安装,配置,使用步骤
前端
看晴天了8 小时前
nestjs学习, PM2进程守护,https证书配置
前端
blues_C8 小时前
Playwright MCP vs Chrome DevTools MCP vs Chrome MCP 深度对比
前端·人工智能·chrome·ai·chrome devtools·mcp·ai web自动化测试
木心操作8 小时前
nodejs动态创建sql server表
前端·javascript·sql
一个很帅的帅哥8 小时前
Vue中的data为什么是函数?
前端·javascript·vue.js·data
南屿im9 小时前
用 Node.js 开发命令行工具:打造你的高效 CLI
前端·javascript
小刘鸭地下城9 小时前
深入解析 Vue 的异步 DOM 更新机制:nextTick 的正确使用指南
vue.js