vue 是一个完全支持组件化开发的框架, 组件之间可以进行相互的引用。
vue 中组件的引用原则:先注册后使用。
vue中组件注册分为局部注册和全局注册:
关于这两者区别:
被全局注册
的组件,可以在全局任何一个组件内使用
被局部注册
的组件,只能在当前注册的范围内使用
一.全局注册
1.在main.js中引用
import Vue from 'vue'
//导入 dialogBox 和Test 两个组件
import dialogBox from './components/InfoMessage/index.vue';
import Test from './components/MyTest.vue'
Vue.component('dialogBox', dialogBox)
Vue.component('my-test', Test)
2.使用全局注册组件
使用app.component() 方法注册的全局组件,直接以标签的形式进行使用即可,
//在 main.js中,注册了dialogBox 和my-test两个全局组件
Vue.component('dialogBox', dialogBox)
Vue.component('my-test', Test)
<!--在其他组件中,直接以标签的形式,使用刚才注册的全局组件即可
<template>
<h1>这是App根组件</h1>
<hr/>
<dialogBox></dialogBox>
<my-test></my-test>
</template>
二.局部注册
<template>
<h1>这是App根组件</h1>
<my-swiper></my-swiper>
<my-search></my-search>
</template>
<script>
import Search from './components/MySearch.vue'
export default {
components:{// 通过 components节点,为当前的组件注册私有子组件
'my-search': Search,
},
}
</script>