vue中使用layer弹窗功能，弹出子组件，解决遇到的一些坑

清疚 2022-11-29 12:50 318阅读 0赞

1.首先要引入jquery和layer（使用layer需要用jquery进行简化操作）  
可以使用网上大多数的办法：使用npm插件安装，具体我就不细聊了，贴一下安装命令和代码

layer安装：

npm install vue-layer --save

main.js引入：

import layer from 'vue-layer'
    Vue.prototype.$layer = layer(Vue);

jquery安装：

npm install jquery --save

main.js引入：

import $ from jquery

随便写一个子组件child-component，里面随便显示一些html

//child-component.vue
    <template>
      <div class="aaa">
          我是子组件
      </div>
    </template>

在父组件father-component.vue里，引入子组件，随便找个地方放下子组件，弄一个按钮触发弹窗事件，**注意我代码中的注释**

<template>
      <div>
        <button @click="popup">弹窗</button>
        
        <childComponent id="childComponent" v-show="false"></childComponent>
      </div>
    </template>
    <script>
    import childComponent from "./child-component.vue";
    export default { 
      data() { 
        return { };
      },
      components: { 
        childComponent,
      },
      methods: { 
        popup() { 
            //layer参数参考官网或其他网上教程
          layer.open({ 
            title: "弹窗标题",
            type: 1,//类型，必填，否则弹窗会出现[object:object]的字，还有一些问题
            content: $("#childComponent"),//这里使用jquery引用上面的组件
            area: ["400px", "400px"],
            btn: ["确定", "取消"],
          });
        },
      },
    };
    </script>

点击父组件弹窗按钮：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70_pic_center]  
就能出现下面效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70_pic_center 1]  
layer参数参考官网或其他网上教程，一定要仔细看，否则会出现一些很奇怪的错误

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/29d2a5c98aaf4c5b88be757ecf11d99b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDMwNTQ0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/29c738bc1949400dad0e7ac3e27de6a6.png