假設:

• 需要一個評論的模塊comment
• 由于comment在多個頁面中可能會復用.
• 于是創建一個comment.vue

步驟:

• 創建comment.vue
• 在需要引用的位置使import comment from '../subcomponent/Comment.vue' 導入子組件
• 在Vue實例中使用components屬性注冊
• 注冊的規則: “comment-box” : comment (前者是在template中使用的標簽名,后者是已經寫好的組件名)

創建Comment.vue

<template><div><h3>評論子組件</h3></div>
</template>
<script> </script>
<style lang = "scss" scoped></style>

導入并使用

// 父組件 NewsInfo.vue
<script>
import comment from '../subcomponents/comment.vue';export default {data() {return () {...}},...components: {"comment-box":comment}
}
</script><template><comment-box></comment-box>\
</template>