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

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>
    <!-- 给一个id，并且隐藏子组件v-show="false" -->
    <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>

点击父组件弹窗按钮：

就能出现下面效果：

layer参数参考官网或其他网上教程，一定要仔细看，否则会出现一些很奇怪的错误