VUE弹窗加载另一个VUE页面

之前实现了一个功能VUE利用tree-transfer插件实现角色菜单动态设置

在这个功能的基础上，进一步完善

角色列表Uacter.vue页面，点击【菜单设置】按钮，弹出角色菜单MenuRole.vue页面，也就是说实现的是一个弹窗功能，只不过加载的vue页面

说来惭愧，这是我应用vue的第4天，好多东西都不知道，然后就是现学现用

首先肯定是找百度啊

主要参考的列子：vue编辑、新增弹框（引用外部页面）

但是按照上边这个方法，我的弹窗一直都没有显示出来，一个大的改动点是我Uacter.vue页面引用MenuRole时直接包裹在dialog里边

菜单权限按钮：

菜单权限

引入MenuRole页面：

编辑按钮触发方法：

   //设置菜单权限
    handleClick3(id){
        let roleId = id;
        this.menuRoleVisible = true;
        this.$nextTick(()=>{
            this.$refs.menuRole.dataInitialization(roleId);
       })
    }

MenuRole.vue完整代码：

最终实现效果：

后记：用这个tree-transfer插件真的完美解决了我的问题，而且不需要再去给左移、右移按钮添加事件。看别人实现的代码好像很顺利，但真的做起来的时候总会遇到各种bug，我就一点一点去改去测，方法有些笨，毕竟刚开始接触vue呢，但是感觉以我现在混迹后端的水平，vue我也就只能实现基本的功能，做不出很酷炫的效果，慢慢来吧