关于vue如何创建一个自定义组件（这是项目中经常得用的）

最新推荐文章于 2023-07-24 01:00:00 发布
最新推荐文章于 2023-07-24 01:00:00 发布
阅读量1.7k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/hsdying/p/7454241.html
版权

1. 首先作大米饭我们得有米吧 要不 巧妇难为无米之炊啊  因此先买好我们自己的大米也就是创建组件文件，这里我假设要创建一个自己loading效果组件 那么我们就先创建 loading.vue 里面的代码根据vue template相关规则写就可以 这里就不在赘述了 我只写一个最最简单的例子 

2.ok了 米就这么愉快的买好了 那么有了米我们现在只需要把他放在锅里！那么这个锅是谁呢！好吧我们自己来背这个锅，我们创建一个相关的.js文件 通常组件都是一个功能自己一个文件夹那么每个组件都应该有自己独立的调用文件（一盆大米一个锅）那么为了统一我们可以都叫做index.js当然了这个名字你可以随便起 只有以后你在后续调用时候更换相关名字即可！重点来了 这个锅是怎么造的呢！话不多说直接上图

那么上面三个这么违和的框是干什么的么：红色框框：我靠这还用问吗  你调用那个文件你得告诉人间啊 这里当然要调用刚才我们自己创建的loading.vue文件。  黄色框框：我靠这个黄色的框框可以说是本次本文章中重点中的重点 为什么这么说呢 我们要使用自己的组件就要导出这个组件 而这个黄色框框中的代码就是导出自己组件的相应配置  其中那个非常猥琐的浪线则是本例子的”命根子“ 这个命名就是你在其他文件中调用这个组件（这里是loading组件）的名字 在这个例子中我们在调用组件时候就可以写成<Loading></Loading>。白色框框：这个没什么好说的 相当于导出这个组件 在main中好接受！

3.原材料大米也有了 饭锅也有了 现在是万事俱备只欠东风 那我们第三部就是一个字”煮“ 两字：”开火“ 这里就是我们要把我们这个自己创建的组件应用到我们的页面之中 详情请看下图

黄色框框部分就是在主文件main.js中 引入刚才定义的组件 和 应用 这个组件了！

转载于:https://www.cnblogs.com/hsdying/p/7454241.html

dfwohbl8515
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
零基础快速入门vue之如何创建自定义组件并引用组件 | 超级详细，建议收藏
**My Coding Family**
04-25 9万+
零基础快速入门vue之如何创建自定义组件并引用组件，超级详细，建议你收藏。
Vue：如何在vue-cli中创建并引入自定义组件
weixin_30617737的博客
01-10 7892
一、创建并引入一个组件 1、创建组件 vue-cli中的所有组件都是存放在components文件夹下面的，所以在components文件夹下面创建一个名为First.vue的自定义组件： <template> <div> <h1>{{msg}}</h1> </div> </temp...
什么是Vue组件？如何定义一个Vue组件？
最新发布
wzxue1984的博客
07-24 179
Vue组件是Vue.js框架中可复用的、独立的模块。组件允许我们将应用程序拆分为多个独立的功能块，每个功能块都由HTML模板、CSS样式和JavaScript逻辑组成。通过封装这些功能块为组件，我们可以在应用程序中重复使用它们，并更好地维护和管理代码。通过以上步骤，您就可以成功定义和使用一个Vue组件。定义的组件可以被多次重复使用，将应用程序拆分为更小的可组装的部分，使代码更加模块化和可维护。
Vue 自定义组件
热门推荐
qq_41775769的博客
03-13 2万+
Vue 自定义组件与使用 1. 初识组件   组件：如果项目中多次用到类似的效果，就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件，组件必须导入之后才能使用，其中 HelloWorld 为自定义名称，通过这个名称就可以调用对应组件。   components：组件文件只导入是不能被调用的，还必须在 components 中注册组件，注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式
Vue创建自定义组件，并详解整个创建自定义组件的过程
pon的博客
03-28 8862
在vue开发项目中想自定义一个自己的组件，于是在网上找一下教程，教程基本的都一样，但是都不是很详细，我就按照网上的教程从头到尾学习了一遍，文章中如果有不正确的，还请各位大佬指出，共同进步。 vue自定义组件前奏 学习 ES6中import xxx from xxx的用法，因为这个用法会在后面的自定义组件中用到。 Vue使用import … from …来导入组件，库，变量等。而from后的文件来......
Vue如何自定义组件?超详细Vue自定义组件指南!使用自定义组件减少重复造轮子! ∠( °ω°)／ 前端知识
寻觅的博客
06-27 1万+
文章目录使用意义基础使用给组件添加属性单一根元素 使用意义 有时候一组HTML代码可能会在多出使用(比如页眉页脚)。如果我们把这样的代码到处都进行复制粘贴,虽然一时方便了,但后期维护代价非常高,而且代码重复性较高,导致可读性也有所下降。这时候我们就可以将这些重复代码封装成一个组件,以后在使用的时候只需要写上自定义组件的标签即可直接调用。 基础使用 自定义组件Vue.component('标签名', {})一般我们的HTML模板和data数据以及方法之类的都会放在组件的大括号中。下面我会创建一个可以记录点击次
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
详解Vue用自定义指令完成一个下拉菜单（select组件）
11-27
这次分享的是关于Vue自定义指令的使用方法，学习完基础后我们再来实战完成一个下拉列表，废话不多说，直接上干货 基本用法 //全局注册 Vue.directive('my-directive', { // 指令选项 }) // 局部注册 var app = ...
vue如何在自定义组件中使用v-model
08-27
在 Vue 官方文档中，有一个关于自定义组件的 v-model 官方例子。该例子展示了如何在自定义组件中使用 v-model 指令来实现父子组件之间的数据通信。 知识点5：model 属性的使用 在子组件中，我们可以使用 model 属性...
vue手写一个自定义操作的工作流
06-15
在Vue.js框架中，手写一个自定义操作的工作流是一项挑战性的任务，但它能让你更好地理解和控制工作流的每一个细节。下面将详细讲解这个过程涉及的关键知识点。 首先，我们需要了解`Vue`的基础知识。Vue.js是一款轻...
使用 Vue cli 3.0 构建自定义组件库的方法
10-17
Vue CLI 3.0 是一个强大的工具，用于快速搭建基于 Vue.js 的项目。它提供了开箱即用的脚手架，简化了项目的初始化和构建流程。这篇文章将介绍如何使用 Vue CLI 3.0 构建自定义的组件库，帮助开发者创建自己的 UI 库...
Vue中如何定义， 使用， 操作组件
xuwei1215225的博客
04-22 1750
. 组件 这里有一个 Vue 组件的示例： Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++"> You clicked me {{ count }} times. <...
vue组件化开发
m0_51328823的博客
02-04 1065
vue组件化开发 在vue中开发，都是用的组件化的思想开发的，一般在都会在搭建项目的时候，都会先建立组件的模板，把架子搭起来。也就是在组件中定义好<template>视图层，<script>逻辑层，<style>css样式层。 一般在项目src中创建一个components文件夹存放我们自定义的组件，在需要的页面中导入并注册后，通过标签的形式使用。 1.第一步：在页面中引入子组件,(假设在components文件下有一个myHeader.vue组件) import m
vue项目中自定义组件的写法与用法
u012201879的博客
01-03 1091
一、创建 loading.vue 二、创建 index.js 三、在入口main.js中
vue模块单独封装html,在vue中怎么定义自定义组件？
weixin_33216825的博客
06-08 1194
在vue中怎么定义自定义组件？下面本篇文章给大家介绍一下在vue中定义(创建)自定义组件的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在vue中定义(创建)自定义组件的方法1、在components(专门放组件的文件)下创建一个放置自定义组件的文件夹(我是放在了components底下的common中，本文以table.vue为例)2、在你要添加的页中加入要引入的模块，注...
Vue 中自定义组件（包含实例）
TalonZhang的博客
09-25 2235
Vue 支持自定义组件，方便我们在开发过程中根据自己的项目自定义组件。 定义 主要是通过 Vue.component( ) 来完成。新建一个 alert.js 文件： // 自定义一个 alert 组件 Vue.component('alert', { template: '&amp;lt;button @click=&quot;onClick&quot;&amp;gt;弹窗&amp;lt;/button&amp;gt;', methods：{
vue中如何使用自定义组件
07-08
在 Vue 中使用自定义组件包括以下几个步骤： 1. 创建自定义组件：在 Vue 项目中创建一个.vue文件，其中包含组件的模板、样式和逻辑代码。例如，创建一个名为 "MyComponent.vue" 的文件。 2. 在需要使用自定义组件的地方，引入自定义组件。可以使用 import 语句或者直接在 Vue 实例中注册组件。 - 使用 import 语句引入自定义组件： ```javascript import MyComponent from './MyComponent.vue'; ``` - 在 Vue 实例中注册组件： ```javascript Vue.component('my-component', MyComponent); ``` 3. 在 Vue 模板中使用自定义组件。在模板中使用组件的方式是将组件的标签作为普通 HTML 标签使用，并传递相应的属性和数据。 ```html <template> <div> <my-component :prop1="value1" :prop2="value2"></my-component> </div> </template> ``` 注意，这里的 "my-component" 是组件标签名，需要与注册组件时的名称保持一致。 4. 在自定义组件中，可以通过 props 接收传递给组件的数据，并在组件内部进行处理和渲染。 ```html <template> <div> <h1>{{ prop1 }}</h1> <p>{{ prop2 }}</p> </div> </template> <script> export default { props: ['prop1', 'prop2'], // 组件的其他逻辑代码 } </script> ``` 这样，你就可以在 Vue 项目中使用自定义组件了。记得在需要使用组件的地方引入自定义组件，并在模板中使用组件的标签。同时，可以通过 props 向组件传递数据，组件内部可以通过 props 接收并使用这些数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值