php中优雅使用vuecli,如何实现vue-cli组件导入与使用

这次给大家带来如何实现vue-cli组件导入与使用,实现vue-cli组件导入与使用的注意事项有哪些,下面就是实战案例,一起来看一下。

一个文件就是一个模块,需要引入模块,和暴露模块的方法

在一个组件中使用另一个组件三部曲:引入组件、注册组件、使用组件

1.main.js文件解读

.是整个项目的入口文件,在src文件夹下

.import(es6)引入vue和根组件app.vue

.最后new Vue,启动应用

78e798e814b993f02268109a59d8ca3e.png

.定义的组件一般放到components目录下

.用一个组件的过程

a .被引用的文件暴露对象(如果组件中没有script,可以不需要暴露)

a2fcb313be6cd7472eaa32407bfb3263.png

b. 父组件引入子组件,注册组件(全局组件不需要引入),使用组件

179767ce0959d4c0d7a887fe35175171.png

扩展:import

import OO from XX

1.import相当于var、let去声明一个变量OO(自定义,解构赋值都可以)

2.from:引入哪个文件

.如果是自己定义的文件,一定要写相对路径‘./'

.如果引入node——modules下的文件不需要写

1b600c7d11dc4c54942b62c05a076b9b.png

import 变量 from ‘模块路径

import {解构赋值} from ‘模块路径

import {* as 变量} from ‘模块路径

3.此时OO返回一个对象

4.如果希望对象中有内容,需要XX先暴露出对象,这样OO才能接收到并在当前文件使用。根据暴露对象的格式,决定接手变量的格式

.暴露多个对象,通过解构赋值接收

10f6478b6660ee79f4924e94353650b2.png

.暴露多个对象,通过一个变量接收

5b7848be3caabcfa55ce4e6192a9f5d5.png

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值