1.自定义组件
<template>
<div class="HelloWorld">
<slot/>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
// 传入子组件的参数写到props
props: {
}
}
</script>
<style scoped lang="scss">
.HelloWorld{ width: 100%; font-size: 14px; }
</style>
2.给自定义的组件添加install方法
import HelloWorldfrom './BreadCrumb'
// 添加install方法
HelloWorld.install = function(Vue) {
Vue.component(HelloWorld.name, HelloWorld);
};
export default HelloWorld;
3.在 main.js 中引用
import Vue from 'vue'
import App from './App.vue'
import HelloWorld from '@/components/HelloWorld.js'//引用全局组件Button
Vue.use(HelloWorld);//使用全局组件HelloWorld
new Vue({
render: h => h(App),
}).$mount('#app')
4.在页面中使用
<template>
<div id="app">
<!-- 使用组件 -->
<bread-crumb>HelloWorld</bread-crumb>
</div>
</template>
