vue怎么引入子组件

痛定思痛。 2023-06-21 07:23 4阅读 0赞

**第一步：例子是在aboutUs.vue界面引入子组件sideFloating.vue，如下图**  
![在这里插入图片描述][20191211173647887.png]  
**第二步：给子组件sideFloating.vue命名一个全局的id**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]  
**第三步：返回aboutUs.vue页面，引用sideFloating.vue子组件代码如下图**

// 首先引入界面，indexFloating对应上一步的命名，然后渲染界面；
    import indexFloating from '../../components/sideFloating/sideFloating.vue'
    export default {
      name: 'aboutUs',
      components: {
        indexFloating
      }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1]  
**第四步，进过引入界面和渲染界面后，可以在aboutUs.vue调用sideFloating.vue界面**

<index-floating></index-floating>

对应indexFloating大写变小写，连接处用-链接

**第五步，运行项目，打开网页显示，子组件引入成功**

[20191211173647887.png]: https://img-blog.csdnimg.cn/20191211173647887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212093454603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2019121209410855.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTE2MTY0,size_16,color_FFFFFF,t_70