Vue グローバルコンポーネントの使い方
すべてのコンポーネント、または、多くのコンポーネントで同じコンポーネントを使いたい場合は、そのコンポーネントをグローバルコンポーネントとして登録しておくと便利です。
例えば、ComponentA、ComponentB、ComponentCというコンポーネントがあります。
<template>
<div>
<p>
ComponentA
</p>
</div>
</template>
<script>
export default {
name: 'ComponentA',
props: {
msg: String
}
}
</script>
<style scoped>
div {
border: 2px solid #ccc;
}
</style>
<template>
<div>
<p>
ComponentB
</p>
</div>
</template>
<script>
export default {
name: 'ComponentB',
props: {
msg: String
}
}
</script>
<style scoped>
div {
border: 2px solid #ddd;
}
</style>
<template>
<div>
<p>
ComponentB
</p>
</div>
</template>
<script>
export default {
name: 'ComponentB',
props: {
msg: String
}
}
</script>
<style scoped>
div {
border: 2px solid #eee;
}
</style>
これらのコンポーネントで、以下のMyComponentを使いたいとします。
<template>
<div>Tamibouz</div>
</template>
<script>
export default {
name: 'MyComponent',
props: {
msg: String
}
}
</script>
<style scoped>
</style>
MyComponentがローカルコンポーネントだった場合、ComponentAの中で import 文を書き、components プロパティで指定する必要があります。
しかし、以下のようにグローバルコンポーネントとして登録することで、これらの記述なしで直接MyComponentを使えるようになります。
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
Vue.component('MyComponent', MyComponent) // グローバルコンポーネントとして登録
new Vue({
render: h => h(App)
}).$mount('#app')
<template>
<div>
<p>
ComponentA
</p>
<MyComponent />
</div>
</template>
<script>
export default {
name: 'ComponentA',
props: {
msg: String
}
}
</script>
<style scoped>
div {
border: 2px solid #ccc;
}
</style>
ComponentB、ComponentCでも同様です。
これで、以下のように各コンポーネントでMyComponentを使うことができます。
