Django restframework加Vue打造前后端分离的网站(十七)封装和注册自定义组件
我们往往会遇到在多个页面都会用到的元素，比如一个用来选择用户的下拉框，比如一个带有条件的搜索栏，于是我们可以将这类型的封装为组件，在需要的页面里引用，而不需要重复写。
像前一篇的面包屑导航就可以做为一个例子来封装为组件。
我们可以在src/components文件夹里新建一个只定义面包屑的vue文件，假设叫做own-breadcrumb.vue：
<template>
<a-breadcrumb>
<a-breadcrumb-item href="">
<a-icon type="home" />
</a-breadcrumb-item>
<a-breadcrumb-item href="">
{{this.$options.name}}
</a-breadcrumb-item>
<a-breadcrumb-item>
{{this.$route.meta.breadcrumb}}
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script>
export default {
name: 'OwnBreadCrumb',
data () {
return {
msg: ''
};
}
};
</script>
我们期望能在引用它时就像使用html标签一样，比如<span></span>这样。
于是我们需要注册这个组件以供我们使用。
注册组件可以分为局部和全局。
局部的话就是在当前文件里调用时生效。我需要在<script></script>中指明：
<script>
import mybreadcrumb from '@/components/own-breadcrumb'
export default {
components: {
mybreadcrumb
},
......
}
然后在template中便可以用<mybreadcrumb />来把我们自定义的面包屑给加载进来。
如果需要全局注册的话，可以在main.js中引入：
...
import ownbreadcrumb from '@/components/own-breadcrumb'
Vue.use(ownbreadcrumb)
Vue.component('ownbreadcrumb', ownbreadcrumb)
...
然后在template中便可以用<ownbreadcrumb />来把我们自定义的同一个面包屑给加载进来。
在做了上述操作后如下的两种使用都可以产生同样的页面效果：
<template>
<div :style="{backgroundColor: '#FFF', margin: '20px'}">
<mybreadcrumb />
<ownbreadcrumb />
...
</div>
</template>
