一、组件注册
1、局部注册
局部注册我们应该是最熟悉的,比如我们不想单个组件容量太大,所以想提取部分模块,通过父子组件传参的形式来连接
// 子组件 child.vue
<template>
<div>
<h1>{{ title }}</ht>
</div>
</template>
<script>
export default {
porps: {
title:{ type: String, default: '子组件' }
},
data() {
}
}
</script>
// 父组件
<template>
<child :title="_title></child>
</tempalte>
<script>
import Child from './child.vue'
export default {
name: 'father',
component: { // 局部注册组件
child,
},
data() {
return {
_title: '我的子组件'
}
}
}
</script>
2、全局注册
我们做项目的过程中经常提取或者封装公共组件,那么这些公共组件怎么全局注册,以便所有组件中直接使用?
注:全局注册必须在入口文件注册,如 main.js
2.1、单个组件全局注册
Vue.component('定义的组件名称','引入的组件')
// 第一个参数是以后其他组件直接使用的名称,官方建议全小写加横线,如 my-component-name
// 第二个参数是 import 引入的组件
// 入口文件,如 main.js
import Vue from 'vue'
import MyCart from './my_cart.vue'
Vue.component('my-cart', MyCart);
// 其他组件
<template>
<div>
<p>购物页面</p>
<my-cart></my-cart> // 可自定义传参 :data-cart="dataCart"
</div>
</template>
2.2、多个组件全局注册,即模拟第三方UI库的注册模式
// 建一个收集组件的js文件,如 components_index.js
import ComponentA from './components/compnentA.vue'
import ComponentB from './components/componentB.vue'
const components = [
ComponentA,
ComponentB
];
// Vue.use 必须保证注册的组件有 install 函数
const install = (vue) => {
components.map(component => {
// 注意这里的 component.name 是每个组件中export default自定义的 name,这个 name 可以在项目vue组件中直接使用
Vue.component(component.name, component);
});
};
// 注:导出,供 Vue.use注册,其实 Veu.use()是调用Vue.js中的install函数,然后将我们暴露的install执行,真正的注册还是 Vue.component()
// 第三方库基本以这种方式注册他们的各个组件,直接使用 Vue.use(element),其内部已经有 instatll => Vue.component()
export default {
install, // install 必须暴露,供vue去调用,检测并注册组件
ComponentA,
ComponentB
}
// 入口文件,如 main.js
import Vue from 'vue'
import All_ui_unit from './components/components_index.js';
Vue.use(All_ui_unit );
二、自定义全局函数,类似全局组件注册的方式
1、在 main.js 使用 Vue.prototype
import Vue from 'vue';
Vue.prototype.getToken = function () {
...
}
// 所有组件中调用该方法
this.getToken();
2、批量定义全局函数
// 自定义函数集合 utils.js
exports.install = function (Vue, options) {
Vue.prototype.getToken = function() {
...
},
Vue.protoType.setToken = function() {
...
}
}
// main.js
import Vue form 'vue'
import utils from './utils.js'
Vue.use(utils);
三、自定义指令全局注册
1、全局注册
// 在入口文件 main.js
import Vue from 'vue'
// 注册一个全局自定义指令: ‘v-focus'
Vue.directive('focus', {
inserted: function(el) {
el.foucs();
}
});
2、局部注册
// 在单个组件中
<template>
<input v-focus />
</template>
<script>
export default {
name: 'xx'
directives: { // 在该模版任意元素上使用
inserted: function(el) {
el.focus();
}
},
data() {
}
}
</script>