vue将组件封装为方法调用

v-bind绑定对象

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 等同于 -->
<div id="someProp"  other-attr="ortherProps"></div>

某个组件

<template>
  <el-dialog
     v-bind="optionConfig"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    
  >
    <span>{{msg}}</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang='ts'>
import { Component } from "vue-property-decorator";
import Vue from "vue";
import { Dialog,Button } from 'element-ui'
@Component({
  components: {
      "el-dialog": Dialog,
      "el-button": Button
  }
})
export default class Yuhong extends Vue {
    dialogVisible: boolean =  false;
    msg: string = '';
    optionConfig: any = {};
    public handleClose(){
        this.dialogVisible = false;
    }
    public config({option = {},text = ''}){
        this.msg = text;
        this.optionConfig = option;
        return this;
    }
    public visible(bool){
        this.dialogVisible = bool;
    }
}
</script>

<style>
</style>

注册为全局方法

import Dialog from './yuhong.vue';

 const install = (Vue, options) => {
    console.log('Vue,', Vue, 'options:', options);
    const dialogClass = Vue.extend(Dialog);
    var component = new dialogClass().$mount()
    document.body.appendChild(component.$el);
    Vue.prototype.$yu = component;
}
export default install;

main.js 使用vue.use

Vue.use(install,{传递的数据})

使用

this.$yu.config({ option:{},text: ‘1’ }).visible(true)

方法2，推荐

• 首先封装一个组件

  <template>
  <section class="dialog">
      <img src="https://img01.yzcdn.cn/vant/apple-3.jpg"  style="width: 200px"/>
      <p>{{msg}}</p>
      <div>
          <button @click="onCancelFunc">返回</button>
          <button @click="onSaveFunc">确定</button>
      </div>
  </section>
  </template>
  
  <script>
  
  export default {
      props: ['onClose','onSave'],
      data(){
          return {
              show: true
          }
      },
      mounted(){
          console.log(this);
      },
      methods:{
          onCancelFunc(){
              this.$emit('onTest','我爱李泰利'); // 通过emit提交事件
              this.onClose && this.onClose(); // 通过父组件传入的回调函数提交 事件
          },
          onSaveFunc(){
              this.onSave && this.onSave()
          }
      }
  }
  </script>

• 传组件使用类，封装

  import VantModal from './vant-modal.vue';
  import Vue from 'vue';
  
  class Modal{
      constructor(props){
          this.app = null;
          this.mountElement = null;
          this.show(props);
      }
      show(props = {}){
          const oDiv = document.createElement('div');
          oDiv.className = props.custormClassName || 'yh-dialog';
          const oChildDiv = document.createElement('div');
          oDiv.appendChild(oChildDiv);
          document.body.appendChild(oDiv);
          this.app = new Vue({
              render: h => h(VantModal, {
                props,
                attrs: props,
              }),
            }).$mount(oChildDiv);
          
          this.mountElement  = oDiv;
          // 接收子组件的emit事件
          this.app.$children[0].$on('onTest', data=>{
              console.log('modal.js中收到 自定义事件onTest',data);
              props.onTest(data);
          })
      }
      close(props = {}){
          this.app.$destroy();
           document.body.removeChild(this.mountElement);
      }
  }
  
  export default Modal;

• 调用

  <template>
      <div>
           <button @click="openMask">打开警告弹窗</button>
    
      </div>
  </template>
  
  <script>
  import Modal from './modal'
  export default {
      data(){
          return {
              
          }
      },
      methods:{
          openMask(){
              const app = new Modal({
                  // msg: '我通过命令式渲染',
                  html: "<p style='color:red'>通过命令式渲染</p>",
                  onClose:()=>{
                      console.log('关闭')
                      app.close();
                  },
                  onSave: ()=>{
                      console.log('保存')
                      app.close();
                  },
                  onTest: (data)=>{
                      console.log('ontest is start', data);
                  }
              });
             
          }, 
      }
  }
  </script>