Vue is a framework that fully supports component-based development, and components can be referenced to each other. The reference principle of components in vue: register first and then use.
1. Registration of components
Components can be referred to each other, for example:
the way to register components: divided into two types: "global registration" and "local registration", among which:
The blocked component can be used 全局注册in any global component The blocked component can only be used in the currently registered scope局部注册
1) Globally register components
Referenced in 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) Use global registration components
The global components registered with the app.component() method can be used directly in the form of labels, for example:
//在 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>
3) Partially register components
<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>
2. The difference between global registration and local registration
Passed 全局注册components can 全局be used in any component
Passed 局部注册components can only 在这里插入代码片be used in the scope of the current registration
Application scenario :
If some components are used frequently during development, it is recommended 全局注册;
if some components are only used in specific situations, it is recommended to do so 局部注册.
3. The case of the name when the component is registered
When registering a component, there are two ways to define the component registration name:
① Use kebab-case nomenclature (commonly known 短横线命名法as my-test and my-search)
② Use PascalCase nomenclature (commonly known as 帕斯卡命名法or 大驼峰命名法, such as MyTest and MySearch)
Features of dash nomenclature :
Must be used strictly according to the dash name
Features of Pascal's nomenclature :
It can be used strictly according to the name of Pascal, and it can also be converted into a dash name for use
Note: In actual development, it is recommended to use Pascal nomenclature to register names for components, because it is more applicable
4. Register the component through the name attribute
During component registration, in addition to directly providing the registered name of the component, the name attribute of the component can also be used as the name of the registered component.
The sample code is as follows:
5. Style conflicts between components
By default, .vue 组件the styles written in will take effect globally, so it is easy to cause style conflicts between multiple components. The root causes of style conflicts between components are:
In a single-page application, the DOM structure of all components is presented based on the unique index.html page
The styles in each component will affect the DOM elements in the entire index.html page