如何实现vue-cli组件导入与使用

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

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

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

1.main.js文件解读

.是整个项目的入口文件,在src文件夹下
.import(es6)引入vue和根组件app.vue
.最后new Vue,启动应用

如何实现vue-cli组件导入与使用

2、组件的使用

.定义的组件一般放到components目录下
.用一个组件的过程

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

如何实现vue-cli组件导入与使用

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

如何实现vue-cli组件导入与使用

扩展:import

import OO from XX

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

2.from:引入哪个文件

  .如果是自己定义的文件,一定要写相对路径‘./’
  .如果引入node——modules下的文件不需要写

  如何实现vue-cli组件导入与使用

     import 变量 from ‘模块路径
     import {解构赋值} from ‘模块路径
     import {* as 变量} from ‘模块路径

3.此时OO返回一个对象

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

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

如何实现vue-cli组件导入与使用

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

如何实现vue-cli组件导入与使用

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

antd下拉框联动使用步骤详解

如何使用JS实现合并多个数组去重算

以上就是如何实现vue-cli组件导入与使用的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2757309.html

(0)
上一篇 2025年3月8日 07:54:18
下一篇 2025年2月19日 13:33:43

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • vue-cli 3.0.x使用步奏详解

    这次给大家带来vue-cli 3.0.x使用步奏详解,vue-cli 3.0.x使用的注意事项有哪些,下面就是实战案例,一起来看一下。 1. 官网资料 在学习技术的时候,经常看查看官网的资料。因为那里的资料更新是最快的 。vue-cli v…

    编程技术 2025年3月8日
    200
  • 怎样操作vue select组件使用与禁用

    这次给大家带来怎样操作vue select组件使用与禁用,操作vue select组件使用与禁用的注意事项有哪些,下面就是实战案例,一起来看一下。 业务:消息推送方式有两种,为“微信”和“邮件”,微信发送时需要选择“要发送的应用程序”,邮件…

    2025年3月8日
    200
  • 如何用vue写一个自定义组件

    这次给大家带来如何用vue写一个自定义组件,用vue写一个自定义组件的注意事项有哪些,下面就是实战案例,一起来看一下。 写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目。如果还不知道怎么用web…

    编程技术 2025年3月8日
    200
  • 如何操作vue组件使用props传递数据

    这次给大家带来如何操作vue组件使用props传递数据,操作vue组件使用props传递数据的注意事项有哪些,下面就是实战案例,一起来看一下。 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递。父组件通过 prop…

    2025年3月8日
    200
  • 怎样使用vue组件与复用功能

    这次给大家带来怎样使用vue组件与复用功能,使用vue组件与复用功能的注意事项有哪些,下面就是实战案例,一起来看一下。 一、什么是组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重…

    编程技术 2025年3月8日
    200
  • 快速解决vue-cli不能初始化webpack模板的问题

    下面我就为大家分享一篇快速解决vue-cli不能初始化webpack模板的问题,具有很好的参考价值,希望对大家有所帮助。 vue init webpack pro [Failed to download repo] [connect ETI…

    编程技术 2025年3月8日
    200
  • 解决vue-cli + webpack 新建项目出错的问题

    下面我就为大家分享一篇解决vue-cli + webpack 新建项目出错的问题,具有很好的参考价值,希望对大家有所帮助 今日使用 npm init webpack love 创建一个新项目,然后执行 npm run dev 之后项目报错,…

    编程技术 2025年3月8日
    200
  • vue组件与复用详解

    组件 (component) 是 vue.js 最强大的功能之一。组件可以扩展 html 元素,封装可重用的代码。这篇文章主要介绍了vue组件与复用,需要的朋友可以参考下 一、什么是组件 组件 (Component) 是 Vue.js 最强…

    编程技术 2025年3月8日
    200
  • 怎样使用angular4在多个组件中数据通信

    这次给大家带来怎样使用angular4在多个组件中数据通信,使用angular4在多个组件中数据通信的注意事项有哪些,下面就是实战案例,一起来看一下。 应用场景,不同组件中操作统一组数据,不论哪个组件对数据进行了操作,其他组件中立马看到效果…

    2025年3月8日
    200
  • 怎样使用vue文件树组件

    这次给大家带来怎样使用vue文件树组件,使用vue文件树组件的注意事项有哪些,下面就是实战案例,一起来看一下。 本文主要是分析vue官方仓库里的文件树组件[vue github] demo可以查看 https://codepen.io/sh…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论