Vue 注册全局组件

参考连接https://www.jb51.net/article/242561.htm

一：以插件的形式：

首先：写好组件

<template>
  <div class="textP" >
    <div class="line"> div>
    <span class="texts">{{title}}span>
  div>
template>
 
<script>
export default {
name: "titalBar",
  props:['title']
}
script>
 
<style lang="scss" scoped>
@import "@/styles/_handle.scss";
.textP {
  line-height: 36px;
  font-size: 14px;
  display: flex;
@include background_color("titlebg");
@include font_color("titleP");
}
.line {
  margin: 10px 10px 0 10px;
  width: 3px;
  height: 16px;
@include background_color("line");
}
.texts{
  font-weight: 600;
}
style>

其次：写一个js 文件，将我们写好的组件引入

// 引入我们创建的组件
import title from "../views/loadbusi/mon/compoments/titleBar";
const TitleBar = {
  install:function (Vue){
    Vue.component('title-bar',title)  
    //title-bar 组件的名字，title 要传递的参数
  }
}
export default TitleBar;

然后再main.js 中引入并使用

使用：直接在页面中使用

 

二： 直接在main.js中引入

先写好组件，然后在main.js中引入