vue怎么引入子组件

2025-05-20 05:27:45

1、第一步,利用vue-cli创建一个vue前端项目,文件夹如下图

vue怎么引入子组件

2、第二步,例子是在hom.vue界面引入子组件header.vue,如下图

vue怎么引入子组件

3、第三步,给子组件header.vue命名一个全局的id,export default { name: 'HomeHeader'}代码如下图

vue怎么引入子组件

4、第四步,返回home.vue组件,引用header.vue组件代码如下图HomeHeader 对应上一步的命名;首先引入界面import HomeHeader from './pages/header'然后渲染界面export default { name: 'home', components: { HomeHeader }}

vue怎么引入子组件

5、第五步,进过引入界面和渲染界面后,可以在home.vue调用header.vue界面了,&盟敢势袂lt;home-header></home-header>对应HomeHeader大写变小写,连接处用-链接如下图

vue怎么引入子组件

6、第六步,运行项目,打开网页显示,子组件引入成功,如下图

vue怎么引入子组件
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢