父組件 ：conponent.vue
子組件：iconponent.vue
以下以在父組件（conponent.vue）中引入子組件（conponent.vue）為例講解如何制作和引入子組件：

1、先創建一個單獨的icomponent.vue（子組件）模板

<template><div>子組件</div> </template> <script> </script>

2.在父組件中使用icomponent組件的頁面中，先手動導入icomponent組件

• import icomponent from ‘./icomponent.vue’-----父子組件在同一文件夾下

3.在父組件中，使用‘components’屬性將導入的 icomponent組件注冊為自己的子組件

4.將注冊子組件時候的注冊名稱，以標簽的形式，在頁面中引入即可

以下為component.vue（父組件）的代碼：

<template><div><span>父組件</span><icomponent-box></icomponent-box></div> </template> <script> //導入子組件 import icomponent from './icomponent.vue'; export default {data () {return {collapsed: false,}},components:{ //用來注冊子組件的節點"icomponent-box": icomponent} } </script> <style> </style>

總結

以上是生活随笔為你收集整理的vue制作子组件以及在父组件中引入子组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。