這篇文章主要為大家詳細介紹了vue全域性元件與區域性元件的使用方法，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

vue全域性／區域性註冊，以及一些混淆的元件
main.js入口檔案的一些常用配置， 在入口檔案上定義的public.vue為全域性元件，在這裡用的是pug模版 .wraper 的形式相當於<div class=wraper></div>

—main.js檔案

**main.js入口檔案的內容**
 
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入公用元件的vue檔案 他暴漏的是一個物件
import cpublic from './components/public'
 
Vue.config.productionTip = false
 
// 註冊全域性元件-要在vue的根事咧之前
// 引數 1是標籤名字-string 2是物件 引入外部vue檔案就相當與一個物件
Vue.component('public', cpublic)
// 正常註冊全域性元件的時候，第二個引數應該是物件。
Vue.component('public1', {
 template: '<div>正常的元件模式</div>'
})
/* eslint-disable no-new */
// 生成vue 的根例項;建立每個元件都會生成一個vue的事咧
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})
 

—public.vue 元件為定義的全域性元件在任何元件裡都可以直接使用，不需要在vue例項選項components上在次定義，也不需要再次匯入檔案路徑。

**public.vue的元件內容**
 
 
<template lang="pug">
.wrapper
 slot(text="我是全域性元件") {{name}} 
</template> 
<script>
export default {
 name: 'HelloWor',
 // 全域性元件裡data屬性必須是函式，這樣才會獨立，
 // 在元件改變狀態的時候不會影響其他元件裡公用的這個狀態
 data () {
  return {
   name: '我是全域性元件'
  }//歡迎加入前端全棧開發交流圈一起學習交流：864305860
 }//面向1-3年前端人員
}//幫助突破技術瓶頸，提升思維能力

</script> 
<style scoped> 
</style>
 

在parent.vue元件裡，用到了public全域性元件以及其他的子元件

parent.vue元件

<template lang="pug">
.wrap
 .input-hd
  .title 名稱:
  input.input(type="text",v-model="msg",placeholder="請輸入正確的值",style="outline:none;")
 .content-detail
  .content-name 我是父元件的內容 
 children(:msg='msg', number='1')
 public
 router-link(to='/parent/children2') 第二個子元件
 router-view
</template>
 
<script>
import children from './children'
// children(:msg='msg', number='1')在元件裡 也可以傳遞自定義的屬性，但是是字串型別，
 
export default {
 name: 'HelloWor',
 data () {
  return {
   // 通過prop將資料傳遞到子元件，並與v-model想對應的輸入框相互繫結。
   msg: '這個是父元件的-prop-資料'
  }
 },
 components: {
  children
 }
}
</script>
 
<style scoped>
.wrap {
}
.input-hd {
 display: flex;
 flex-direction: row;
 align-items: center;
 height: 70px;
}//歡迎加入前端全棧開發交流圈一起學習交流：864305860
</style>
 

children.vue是parent.vue的子元件，但是隻在parent.vue作用域裡可用

<template lang="pug">
.wrapper
 slot(text="我是子元件的text") 我是子元件的內容
 .name {{ msg }} {{ number }}
</template>
 
<script>
export default {
 name: 'HelloWor',
 // 接受的時候是用props接受，陣列的形式，裡面是字串的形式。
 // 也可以傳入普通的字串
 // 在子元件中，props接受到的狀態當作vue的例項屬性來使用
 props: [ 'msg', 'number' ]
}
</script>
 //歡迎加入前端全棧開發交流圈一起學習交流：864305860
<style scoped>
 //幫助突破技術瓶頸，提升思維能力
</style>

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

原文地址：https://segmentfault.com/a/1190000017285204