vue2 封装调用组件

已于 2023-08-09 09:52:11 修改
阅读量777 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端JS框架：vue2 文章标签： 封装组件 调用组件 vue-cli javascript 前端
于 2019-07-05 23:06:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42618566/article/details/94776310
一、创建组件
  1. 添加个vue文件，就是你的组件。
    在这里插入图片描述
  2. 在这个组件里完善你要的组件样子、功能。
    在这里插入图片描述
二、调用组件

要哪个页面里显示这个组件就去哪个页面文件引入组件。
举个例子：我就在HelloWorld页面展示ADD组件的内容，所以我在HelloWorld.vue文件里调用了就。
3 个步骤：导入组件、注册组件、调用组件
在这里插入图片描述

效果出来了，如图：
在这里插入图片描述

全局批量封装组件及调用：https://blog.youkuaiyun.com/qq_42618566/article/details/104396886

vue2全局批量注册组件
全易
02-19 1112
一、 二、 创建个组件试试： 配置： 调用：
vue2 组件封装
JackZhouMine
06-06 1810
本文记录一下 Vue 组件封装的基本实践和一些组件的相关知识。主要涉及以下知识点：使用第三方计数库 countup.js 创建一个 组件对以上知识进行总结。在组件文件夹 下创建一个与组件名相同的文件，文件夹内必须有 , 并将组件导入到该文件中，这样方便我们引用组件。 文件夹内： 使用组件时，只需这样引入： Vue 组件的三大核心 属性（props、data 和样式） props 定义了组件 的数据，确定的组件的核心功能。封装组件时，props 推荐写成对象形式，方便对数据进行验证，提高了代码健壮性也
vue-cli中封装一个弹框组件
weixin_41997724的博客
09-13 8016
vue-cli中封装一个移动端的弹出层组件 这是一个提示框和对话框，例： 　　　　　 这是一个组件 eject.vue <template> <div class='kz-cont' v-show='showstate'> <div class='kz-wrapper' &
在vue-cli里面 如何自己封装一个组件
weixin_46690407的博客
11-03 1099
首先在components文件夹下创建一个你要封装的组件文件夹 比如components → demo → x-button.vue 路径下封装一个button的点击事件 <template> <div> <el-button type="primary" @click="handleSubmit">主要按钮</el-button> </div> </template> <script> export de
封装Vue.js组件库
weixin_38550182的博客
04-25 680
文章目录一、介绍二、处理组件边界问题二、attrs-listeners三、快速原型开发四、快速原型开发-ElementUI五、组件开发-步骤条组件六、组件开发-表单组件七、Monorepo 一、介绍 处理组件的边界情况：关于组件的知识点 vue-cli 中提供的快速原型开发：作用是方便我们进行组件开发，并能单独运行单文件组件 组件开发：步骤条、表单组件 开发组件的最佳方式 Storybook：隔离开发组件，方便管理组件和组件测试 Monorepo：项目的一种组织方式，有利于管理组件库的项目结构 Plop：
vue_cli封装axios--完整代码
码上暴富
05-05 688
封装axios封装axios 封装axios 新建一个api文件夹，再新建一个network.js、index.js文件 在network.js中 import axios from 'axios' import Vue from 'vue' // 进行一些全局配置 axios.defaults.baseURL = 'http://127.0.0.1:3000/' // axios.defaults.baseURL = 'http://192.168.43.37:3000/' // axios.defaul
vue之封装多个组件调用同一接口的案例
11-19
本文将探讨如何在Vue中封装公共方法，以实现多个组件调用同一接口并返回接口调用的结果。 首先，让我们看一个简单的例子。在描述中提到的`getAll()`函数是一个尝试获取所有教师数据的接口调用。它使用了一个名为`$...
vue3 封装一个全局通用弹窗提示组件（利用js调用 类似于element）
06-21
本篇文章将详细介绍如何利用Vue3的特性来封装一个类似于Element UI的全局通用弹窗提示组件，并通过JavaScript进行调用。 首先，我们需要了解Vue3中的Composition API。Vue3引入了Composition API，它允许我们在组件...
使用VUE自定义组件封装数据字典实战
03-07
本文主要探讨的是如何使用Vue自定义组件来封装数据字典，以下拉列表为例。 首先，使用Element UI的`el-select`组件可以直接创建下拉列表，但这种方式在处理多个字典数据时会变得复杂。因为每个字典都需要单独请求...
vue2-----父组件调用子组件的方法
weixin_45458830的博客
11-27 2613
父组件调用子组件的方法是通过expose和ref来实现的，我们可以通过expose来控制父组件可以访问子组件那些的方法和对象，我们将通过和option api(选项式 api)来演示父组件如何调用子组件的方法。//详细版 vue2 选项式API 实现 父组件调用子组件方法。vue2 选项式API。
Vue组件的封装与引用
qq_46100001的博客
04-19 715
封装 Vue 组件并引用其实很简单，可以按照以下步骤进行：在 Vue 项目中的 src/components 目录下创建你的组件文件夹，并在其中创建一个 .vue 文件。在这个 .vue 文件中编写你的组件逻辑和模板代码。确保将组件内部需要暴露出来的数据使用 props 属性传递给父组件。导出该组件，可以使用 export default 或者 export 关键字导出组件对象。在需要使用该组件的父组件中，通过 import 引入组件，然后将该组件作为子组件使用。
基于VueCLI3快速生成Vue项目的初步封装组装或必要的零件开箱即用
08-12
基于 Vue CLI 3 快速生成 Vue 项目的初步封装，组装或必要的零件，开箱即用
vue2.x跨组件调用函数的方法
silent_missile的博客
06-07 8632
在实际页面中，很多时候页面一个部分的改变会导致另外一个部分的改变，比如在表格中输入数据会改变相邻的图表形状 但是实际上这两个部分大都是差异很大，所以开发中一般都是做成两个组件的。如果在一个大组件中把所有的内容都包含进去，这就不够结构化了，而且有些时候会导致组件特别大。所以最好还是在一个组件中调用另外一个组件的内部函数。 基本原理是 1. 在激发组件emit一个事件，比如表格输入数据的变化，e...
Vue组件的封装与调用
仗剑东游的猫
09-18 1053
我以一个分页组件来分析 首先，新建了一个page.vue的文件，作为子组件，按照需要将标签样式等写好，我的路径是src/components/page.vue 子组件中设置props，用来接收父组件传递的值，这里我设置了两个值，一个totalCount用来接收总页数，一个input用来接收当前页码 props:['totalCount','input'], 父组件传递过来的totalCo...
vue-cli如何对element-ui组件进行二次封装
热门推荐
原鑫的个人博客
08-29 4万+
Element组件二次封装—入门 目录： Element组件二次封装—入门 为什么要element对进行二次封装？ 如何对element对进行二次封装？ 为什么要element对进行二次封装？ 1.element-ui组件的部分样式不满足当前项目的需求。 element-ui组件的样式是固定的，比如我们常用的那些组件，table，button，icon，ta...
vue封装一个可以通过api调用的组件
yanzhi的博客
01-02 6862
先实现一个vue组件 &amp;amp;amp;lt;!--hello.vue--&amp;amp;amp;gt; &amp;amp;amp;lt;template&amp;amp;amp;gt; &amp;amp;amp;lt;div&amp;amp;amp;gt;{{text}}&amp;amp;amp;lt;/div&amp;amp;amp;gt; &amp;amp;amp;lt;/template&amp;a
在vue中封装可复用的组件
su的博客
08-24 4万+
本次封装的组件以toast组件为例 以前使用移动端ui插件时，通过一句代码比如 $.toast( ‘ 需要显示的内容 ’ )，从而在页面上展示这段文字，并在一定时间后消失。 现在我们也尝试自己封装toast组件。 准备工作：vue-cli脚手架工程 先看一下涉及到的文件目录截图： 这次的封装主要涉及的文件是Toast.vue toast.jsHello.vu...
vue-cli工程下组件之间的通信
su的博客
08-21 8314
vue组件之间的通信包括三种： 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 首先，看一下vue-cli工程的部分目录： 说明一下：App.vue是父组件，ZiZuJianOne.vue和ZiZuJianTwo.vue是子组件，两个子组件是在父组件App.vue里注册的。 ①父组件App.vue如何向子组件ZiZuJianOne.vue通信的 父组...
vue项目调用通用组件_vue封装公共组件（通用组件）需要考虑到什么
weixin_39593519的博客
02-05 1064
开发通用组件是很基础且重要的工作，通用组件必须具备高性能、低耦合的特性一、数据从父组件传入为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则二、在父组件处理事件在通用组件中，通常会需要有各种事件，比如复选框的 change 事件，或者组件中某个按钮的...
vue2封装svg组件
最新发布
03-28
好的，我现在需要在Vue 2中封装一个可复用的SVG组件。首先，我需要了解用户的具体需求，他们可能希望在所有组件中方便地引入自定义的SVG图标，避免重复代码，并且能够通过属性控制SVG的样式和行为。 根据引用[2]中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级码吏

谢谢看官

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值