vue引入全局组件和局部组件的区别以及全局注册公共函数

Posted 2022-01-04 lsc-boke

一，先看看全局组件的引用，就拿最常用的全局的暂无数据来举例，看看全局的是如何实现的。

Step1,首先在components创建一个公共的目录，NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面，index.js用来导出这个组件。

<template>
<!-- NoDataWords 可以灵活控制每个页面显示的内容  -->
<!-- NoDataHeight 可以灵活控制每个页面的高度  -->
<!-- 如果你的页面都是统一的字体，统一的样式,那就直接在这写死就好了 -->
    <div class="NoDataAtAll W100"
         :style="height: NoDataHeight ">NoDataWords</div>
</template>
<script>
export default 
  // 就是基本的父子组件传值
  props: ["NoDataHeight", "NoDataWords"],
  data() 
    return ;
  ,
  methods: 
;
</script>
<style lang="scss" scoped>
.NoDataAtAll 
  font-size: 14px;
  color: #909399;

</style>

 

Step2: 然后就是在index.js中注册该组件

import NoDataS from ‘./index.vue‘
const noDataLists = 
    install: function(Vue) 
        // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了
        Vue.component(‘noDataLists‘, NoDataS)
    

export default noDataLists

 

steps3:在main.js中引入并使用该组件

import noDataLists from ‘@/components/NoDatas/index‘
Vue.use(noDataLists);

 

至此，就可以完美的使用了。

第二种 全局注册组件形式

先在main.js里这样写。  然后在App.vue里面 的template模板里 直接使用  <users></users>加载使用即可

 

4.2局部组件引入方法 就是在App.vue里引入。

2,.全局注册公共的函数
公共函数common.js

const obj=
    fun1()
    ,
    fun2()
    ,
    fun3()
    

export default obj

 

main.js中引入方法

import common from ‘.icommon.js‘
Vue.prototype.common=comm

 

其它组件中调用该方法的时候

this.common.fun1();