vue 复习篇. 注册全局组件,和 组件库

Posted 2022-02-20 yangmengsheng

初篇 ==============================================================

1. 编写loading组件（components/Loading/index.vue）

<template>
  <div>loading</div>
</template>

<script>
export default 
  name: ‘loading‘

</script>

2.注册为全局组件 （components/Loading/index.js）

import loading from ‘./index.vue‘
const loadingOp= 
  install: (Vue) => 
    Vue.component(‘loading‘, loading)
  

export default loadingOp

3.定义组件库(components/index.js)

import Model from ‘./Model‘
import Loading from ‘./Loading‘
export default 
  Model,
  Loading

4.开启全局使用此组件 (main.js)

import componetList from ‘./components‘
const  Model, Loading  = componetList
Vue.use(Model).use(Loading)

5. 使用组件

<template>
      <loading></loading>
</template>

 

中篇 ==============================================================

1. 使用组件

1.新建一个plugins文件夹 
2.在文件夹中创建放置全局组件的文件components.js 
3.在components.js文件中引入所有要注册的全局组件 
4.在app.js根实例文件中，引入components.js

import eg from ‘../components/eg.vue‘; export default (Vue)=> Vue.component("Eg",eg);