Vue自定义组件并引入

Vue--》掌握自定义依赖引入的最佳实践 在现代前端开发中,vue凭借其灵活性和高效性,已成为开发者们的宠儿,然而随着项目的复杂度提升,如何高效地管理和引入依赖,尤其是自定义引入依赖,成为了许多开发者面临的一大挑战。无论是为了优化加载速度,还是为了提高项目的可维护性,自定义引入依赖不仅是技术上的需求,更是提升开发效率的关键所在。 阅读详情

      今天,bug菌为大家带来一期帝王级干货,有关于前端vue的组件教学,深入指引大家在vue中如何创建自定义的组件,并且在vue中引入你自定义的组件;

      具有很好的教学价值,希望小伙伴们根据这篇文章可以有所收获,建议小伙伴们先收藏后阅读哦。

      小伙伴们如果觉得文章不错,点赞、收藏、评论,分享走一起呀,记得给bug菌来个一键三连~~

      好了,我们开始这期的正文吧。

#1、在你的项目中专门创建一个放置自定义组件的文件夹(我是放在了components底下的common中,分类好日后方便维护,本文以table.vue为例)

#2、在你要添加的页中加入要引入的模块,注意驼峰命名的方式(本文为例:<v-table></v-table>,因为我在定义table模块的时候定义了name:v-table,所以引用的时候,也必须得用所在table模块中name定义好的名字);

#3、在index.vue中引入table.vue模块 ;如下:

  1. //index.vue 页面 ,引入v-table模块
  2. <div class="table">
  3. <v-table></v-table> //这就是你引入的自定义模块;注意是驼峰命名法
  4. </div>

#4、在index.vue页面引入该组件(注意:table.vue,我是在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)

  1. //index.vue
  2. <script>
  3. import vTable from '../../components/common/table' //table.vue(注意,我在index.vue页面中添加了模块<v-table>,不是html标签,其实就是vue引入新的子组件)
  4. export default {
  5. name: "index",
  6. components: {
  7. vTable
  8. },
  9. }
  10. </script>

ps:说白了,自定义组件就好比封装,把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可。

#5、另外,为了防止在同一页面写入过多的代码,不方便后期维护,便可以把整个页面分成多个小模块,然后在主页面进行模块引入,创建包括引入步骤都是一样的。

比如:

总结:

vue组件命名问题:

1、别用驼峰式命名 因为 vue   webpack编译后 ,他统一会变成小写(顾名思义:骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起,而构成的唯一识别字时,第一个单词以小写字母开始;从第二个单词开始以后的每个单词的首字母都采用大写字母,例如:myFirstName、myLastName,这就叫驼峰命名;你们学会了吗)

2、组件命名最好加个前缀 比如    <v-table></v-table>或者<v_table></v_table>


❤如果文章对您有所帮助,就请在文章末尾的左下角把大拇指点亮吧!(#^.^#);

❤如果喜欢bug菌分享的文章,就请给bug菌点个关注吧!(๑′ᴗ‵๑)づ╭❤~;

❤对文章有任何问题欢迎小伙伴们下方留言或者入群探讨【群号:708072830】;

❤鉴于个人经验有限,所有观点及技术研点,如有异议,请直接回复参与讨论(请勿发表攻击言论,谢谢);

❤版权声明:本文为博主原创文章,转载请附上原文出处链接和本文声明,版权所有,盗版必究!(*^▽^*).

</article>
别再傻傻分不清!Synopsys DC综合中link/target/symbol/synthetic四大库的保姆级配置指南 本文详细解析了Synopsys DC综合中link_library、target_library、symbol_library和synthetic_library四大库的配置方法,帮助工程师避免常见错误。通过实战示例和调试技巧,指导如何正确设置工艺库与IP库,提升数字芯片设计效率。 阅读详情

相关推荐

癌症免疫治疗预测神器TIDE:从原理到实战(避坑指南)

本文详细解析了癌症免疫治疗预测工具TIDE的核心原理及实战应用。TIDE算法通过模拟肿瘤免疫逃逸的两种核心机制(T细胞功能障碍和排除),为临床决策提供精准预测。文章涵盖数据准备、标准化流程、网页工具操作指南及结果解读,帮助科研人员和临床医生避开常见误区,优化免疫治疗策略。

weixin_29309475的博客 195

Vue 自定义组件

Vue 自定义组件与使用 1. 初识组件   组件:如果项目中多次用到类似的效果,就可以把这个效果进行自定义组件。新建项目后默认存在 HelloWorld.vue 就是一个组件,组件必须导入之后才能使用,其中 HelloWorld 为自定义名称,通过这个名称就可以调用对应组件。   components:组件文件只导入是不能被调用的,还必须在 components 中注册组件,注册后在 <template> 中就可以通过组件名直接引用组件了。在 <template> 中组件以标签形式

qq_41775769的博客 2万+

人形机器人五大核心零部件技术解析与国产化实况

人形机器人并非简单机械集成,而是物理、能量、感知、决策与执行五层系统毫秒级协同的复杂体。其性能瓶颈往往不在于整机算法,而深植于谐波减速器的刚度稳定性、无框力矩电机的功率密度与温升控制、六维力传感器的动态响应与温漂抑制、运动控制器的实时OS生态及灵巧手的多指协同精度等底层硬件能力。这些部件共同构成整机68.3%的成本,且国产化率差异显著——谐波减速器达72%,而高精度力矩传感器仍受制于日德厂商。本文聚焦‘谐波减速器’和‘六维力传感器’两大热词,从材料工艺、参数定义、失效模式到产线验证,揭示真正卡脖子的技术关卡

weixin_29065959的博客 406

Vue 自定义组件的使用指南

首先,让我们了解如何创建一个自定义组件。在 Vue 中,一个自定义组件通常由三部分组成:模板(template)、脚本(script)和样式(style)。创建好自定义组件后,可以在其他组件中局部使用它。局部使用意味着只有在特定的组件中才能访问和使用这个自定义组件。如果希望在整个项目中的任何地方都能使用某个自定义组件,可以进行全局注册。自定义组件可以接收来自父组件的数据。可以通过 props 属性来实现。在自定义组件的脚本部分,定义接收的数据的 props。

m0_57836225的博客 2511

Mamba实战:如何用Samba框架轻松搞定RGB-D显著性检测(附避坑指南)

本文提供了基于Samba框架进行RGB-D显著性目标检测的实战指南。详细解析了从环境配置、数据预处理到模型推理与可视化的全流程,并重点剖析了多模态数据融合中的常见陷阱与调试技巧,旨在帮助开发者高效部署这一基于Mamba的先进视觉模型,规避工程实践中的典型问题。

dapp9builder的博客 615

鸿蒙手机卸载内置应用 adb连接

**傻瓜式删除鸿蒙系统内置应用,自己亲测有效。**

JJDXBT的博客 3万+

vue快速入门(四十四)自定义组件

注释很详细,直接上代码……

https://github.com/amoorzheyu 1231

手把手教你学Simulink——基于Simulink的电压型 vs 电流型整流器性能对比

摘要:本文基于Simulink平台对比分析了电压型整流器(VSR)和电流型整流器(CSR)的性能差异。VSR采用电容滤波,具有高功率因数(PF>0.99)、低输入电流THD(<3%)等优势,但动态响应较慢;CSR采用电感滤波,动态响应快(<0.05s),但THD较高(5%~8%)。研究建立了统一测试平台,详细对比了两者在稳态性能、动态响应、效率等方面的差异,并给出了控制算法实现和参数优化建议。通过量化分析,为电力电子工程师提供了拓扑选型依据,可根据恒压/恒流需求选择最优方案,有效缩短开发周

MHD0815的博客 172

vue 自定义组件

vue 自定义组件(局部、全局)

江西第一深情的博客 1147

如何使用Github创建一个完全免费的个人网站

摘要: 本文详细介绍如何利用Github Pages免费搭建个人静态网站,适合零基础用户。首先需注册Github账号并创建特定命名的仓库(格式:用户名.github.io),然后通过网页或命令行创建index.html文件作为网站首页。完成后可通过"仓库设置- Pages"获取网站链接。文章还包含GitHub Desktop的安装使用、代码提交指南及常见问题自检方法,并说明即使Github被墙也可迁移至国内平台(如码云)。整个过程无需编程基础,仅需15分钟即可完成基础网站搭建。

安德洛夫 1514

基于simulink的软开关技术的三相逆变器仿真

三相逆变器中的软开关技术(Soft Switching Techniques)旨在减少开关损耗,提高效率,并降低电磁干扰(EMI)。实现软开关通常涉及使用谐振电路或准谐振电路来确保开关器件在零电压(Zero Voltage Switching, ZVS)或零电流(Zero Current Switching, ZCS)条件下进行切换。下面将详细介绍如何在Simulink中进行基于软开关技术的三相逆变器仿真设计。

xiaoheshang_123的博客 162

Vue:如何在vue-cli中创建并引入自定义组件

一、创建并引入一个组件 1、创建组件 vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件: <template> <div> <h1>{{msg}}</h1> </div> </temp...

weixin_30617737的博客 8228

基于 Qt C++ 的战术通信终端

logMessage(QString("新客户端连接来自: %1:%2").arg(incomingTcpSocket->peerAddress().toString()).arg(incomingTcpSocket->peerPort()));logMessage(QString("服务器已启动,在 [%1]:%2 监听IPv6连接...").arg(ui->lineEditAddress->text()).arg(port));

寒寒豆豆软件公司的博客 77

vue-cli中如何创建并引入自定义组件

vue-cli中如何创建并引入自定义组件1.在components(专门放组件的文件)下创建一个header.vue文件2.在App.vue文件里添加如下代码   &lt;my-head&gt;&lt;/my-head&gt;  import myHead from './components/header'    components : {    myHead,    }由于vue-cli内部...

weixin_38278892的博客 1万+

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

vue怎么自己创建组件并引用_Vue:如何在vue-cli中创建并引入自定义组件

一、创建并引入一个组件1、创建组件vue-cli中的所有组件都是存放在components文件夹下面的,所以在components文件夹下面创建一个名为First.vue的自定义组件:{{msg}}// 1、export 表示导出,在自定义组件里面使用export default导出export default {// name 表示设置别名,可以不设置,建议和组件的名称一致name:"First...

weixin_39663729的博客 890

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

vue 自定义组件,并引入到另外一个组件中

components文件夹中 TableComponent.vue Blocks.vue 1.Blocks.vue 引入TableComponent.vue html 代码 <TableComponent :tableSelfData="peopleData"></TableComponent> js代码 import TableComponent ...

u013466380的博客 2097

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

!!!vue中如何创建自定义组件并引入组件【详细教程】&Vue父组件控制子组件的显示

vue中如何创建自定义组件并引入组件【详细教程】 Vue父组件控制子组件的显示

Xxxxxl17的博客 418

vue怎么自己创建组件并引用_vue-cli中如何创建并引入自定义组件

1.在components(专门放组件的文件)下创建一个header.vue文件2.在App.vue文件里添加如下代码import myHead from './components/header'components : {myHead,}此时header.vue组件就会被成功引入如果import myHead from './components/header' 去掉前面的 ./...

weixin_39614704的博客 487

vue自定义日期组件

vue-datepicker基于 vuejs 2.x 可自定义主题的日期组件

snawy的博客 4820

vuejs下拉加载_Vuejs的下拉组件

vuejs下拉加载 bp-vuejs-下拉 (bp-vuejs-dropdown) A Dropdown component for Vuejs. Vuejs的Dropdown组件。 View demo 查看演示 Download Source 下载源 安装: (Install:) npm i -D bp-vuejs-dropdown import Vue from 'vue'; i...

cuk5340的博客 326

Vue时间轴组件终极指南:5分钟快速上手timeline-vuejs

在现代Web开发中,Vue时间轴组件已成为展示时间线数据的首选工具,特别是timeline-vuejs以其极简设计和强大功能脱颖而出。本文将带你从零开始,全面掌握这款Vue时间轴组件的使用方法,让你在短时间内构建出专业级的时间轴效果。 ## 为什么选择timeline-vuejs? **🚀 极致轻量**:核心代码体积小,不依赖额外大型库,确保项目性能不受影响。 **🎨 高度可定制**:提

gitblog_00588的博客 961

vuejs 优化滚动条_VueJS 2的虚拟响应式跨浏览器滚动条组件

vuejs 优化滚动条 VBar (VBar) The virtual responsive crossbrowser scrollbar component for VueJS 2x VueJS 2x的虚拟响应式跨浏览器滚动条组件 现场演示 (Live Demo) https://luiguild.github.io/v-bar/ https://luiguild.github.io...

cuk5340的博客 264
上一篇: JS高级——数据类型
下一篇: Vue实现轻量级数字滚动效果插件——vue-countTo
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值