vue自定义封装全局组件与使用

以前只知道第1种局部组件。每个页面都需要引入，注册，然后才能像2一样使用！

下面学习一下全局组件的封装方法：

1、注册全局组件

在项目文件src→util→component.js文件，注册全局组件。

import transitionPage from '@/components/transition/index' //滑入滑出组件
import viewTextarea from '@/components/viewTextarea/index' //模拟textarea 展示富文本信息
export default (Vue)=>{
  Vue.component("transitionPage", transitionPage)
  Vue.component("viewTextarea", viewTextarea)
}

2、封装组件

在项目文件src→components→transition→index.vue文件（后面两个名字自取），在这写要封装的内容。（样式和布局可以复制原有的源码）

<template>
  <div ref="transform">
    <!--1.关闭按钮-->
    <div v-if="visible" class="avue-mask" @click="close"></div>
    <!--2.弹窗内容-->
    <transition class="nametra" name="slide-fade" mode="out-in">
      <div :class="visible?'transitionOpen':'transitionClose'" class="avue-drawer__wrapper" style="background-color: white">
        <div class="avue-drawer__content">
          <!--2.1弹窗标题-->
          <div class="avue-drawer__header">
            <span class="avue-drawer__title">{
  {tableName}}</span>
          </div>
          <!--2.2弹窗数据表单，用子组件方式传入，可根据type类型显示对应表单，满足不同页面的表单需求-->
          <div class="avue-drawer__body" style="height: calc(100% - 140px);overflow-y: auto;">
            <div class="el-scrollbar__view">
              <!--2.2.1会员系统-客户建议-意见建议-回复记录-->
              <div v-if="type === 'messageData'">
                <message-data ref="messageData" :objectData="objectData" :arrayData="arrayData"></message-data>
              </div>
              <!--2.2.2消息管理-消息发送-->
              <div v-if="type === 'messageSend'">
                <send-message ref="sendMessage" :tableName="tableName" :dataFrom="editData"></send-message>
              </div>
              <!--2.2.3微信中心-微信管理-模版参数-编辑弹窗-->
              <div v-if="type === 'editTemplate'">
                <edit-template ref="editTemplate" :editTemplateId="editTemplateId" :editTemplateTitle="editTemplateTitle"></edit-template>
              </div>
            </div>
          </div>
          <!--2.3底部右下角按钮，可根据type类型显示对应按钮，满足不同页面的按钮需求-->
          <div class="avue-drawer__footer" style="position: relative">
            <span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer">
                <el-button type="success" size="small" @click="sendMessageSubmit('saveSend')">发送</el-button>
            </span>
            <span  v-if="type === 'messageSend'" style="margin-right: 10px" class="dialog-footer">
                <el-button type="primary" size="small" @click="sendMessageSubmit('save')">暂存</el-button>
            </span>
            <span  v-if="(type === 'financialPro' && tableName === '新增') || (type === 'healthyPro' && tableName === '新增')
                   || (type === 'healthInvest' && tableName === '新增') "style="margin-right: 10px" class="dialog-footer">
               <el-button type="primary" size="small" @click="keepClose('save')">保存</el-button>
            </span>
            <span v-if="type === 'nodeConfigEdit' || type === 'editTemplate' || (type === 'giftInfo' && tableName === '编辑')
                   || (type === 'reportTemplate' && confirmEnding(tableName,'编辑'))" style="margin-right: 10px" class="dialog-footer">
               <el-button type="primary" size="small" @click="editClose">修改</el-button>
             </span>
             <span class="dialog-footer">
               <el-button type="default" size="small" @click="close">关闭</el-button>
             </span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  /*引入需要的子组件--表单内容*/
  import creatView from '@/views/hygl/syslcpz/creatView/index'
  import cbView from '@/views/hygl/syslcspdbsx/cbView/index'
  import presentPoints from '@/views/hygl/rfjfzs/presentPoints/index'
  import memberInfo from '@/views/hygl/hyjbxx/memberInfo/index'
  import financialInvest from '@/views/hygl/rfjrtzjy/financialInvest/index'
  import healthyPro from '@/views/hygl/rfjkcpxx/healthyPro/index'
  import giftInfo from '@/views/hygl/rflpzlxx/giftInfo/index'
  import messageData from '@/views/hygl/rfyjjy/components/messageData'
  import editTemplate from '@/views/mp/wxmsgtemplate/editPage/index'
    export default {
      //注册
      components: {
        messageData,
        editTemplate,
        sendMessage
      },
      //向子组件传入数据
      props: {
        //通过type来判断需要那个组件
        type:{
          type: String,
          default: '',
        },
        //弹窗的标题
        tableName:{
          type: String,
          default: ''
        },
        //传入的对象
        objectData:{
          type: Object,
          default: function () {
            return {}
          },
        },
        //传入的数组
        arrayData:{
          type:Array,
          default: function () {
            return []
          },
        },
        //传入的字符串
        editTemplateId:{
          type: String,
          default: '',
        },
        editTemplateTitle:{
          type: String,
          default: '',
        }
      },
      data() {
        return {
          visible: true
        }
      },
      created(){},
      mounted(){ },
      methods: {
       confirmEnding(str, target) {
        var start = str.length-target.length;
        var arr = str.substr(start,target.length);
        if(arr == target){
          return true;
        }
        return false;
        },
        //未编辑直接关闭窗口
        close(){
          this.visible = false
          setTimeout(() => {
            if (this.type === 'messageData'){
              this.$emit('messageDataClose')
            }else if (this.type === 'editTemplate'){
              this.$emit('editTemplateClose')
            }else if (this.type === 'messageSend'){
              this.$emit('messageSendDialongClose')
            }
          }, 300);
        },
        //消息发送 保存、保存并发送
        sendMessageSubmit(data){
          this.$refs.sendMessage.submitForm()
          if (this.$refs.sendMessage.dynamicValidate) {
            var row = this.$refs.sendMessage.editData
            var wzObject = this.$refs.sendMessage.wzObject
            var fileNameUrl = this.$refs.sendMessage.fileNameUrl
            var para = {}
            if(data === 'save'){
              para.type = 1
            }else if (data === 'saveSend'){
              para.type = 2
            }
            para.dsfs = false
            para.fsrid = row.fsrid
            wzObject['jsrid'] = JSON.stringify(row.jsrid)
            para.wz = JSON.stringify(wzObject)
            para.fsfs = row.fsfs
            para.jsrid = []
            for (var i = 0;i<row.jsrid.length;i++){
              let m = row.jsrid[i].length
              para.jsrid.push(row.jsrid[i][m-1])
            }