【vue组建使用】

已于 2022-03-04 08:56:14 修改
阅读量533 收藏
点赞数
文章标签： vue.js 前端
于 2022-03-04 08:26:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56349322/article/details/123268119
版权
本文介绍了如何在Vue.js应用中使用组件。首先，通过`import`导入子组件，例如`Left.vue`，并命名为任意名称，如`Left`。接着，在父组件`App.vue`的`script`部分注册组件，例如`component: { 'Left': Left }`。最后，在`template`部分使用``来插入组件。若需将组件定义为全局组件，可创建名为`MyCount`的全局组件，并在其他组件中直接调用``。
摘要由CSDN通过智能技术生成

1.父组件App.vue 中script部分编辑引入子组建比如

Left.vue 代码如下:import Left from "@/component/Left.vue"

这里的import Left 导入的名称可以随便起，起什么后面引入时候就用这个

这里的@＝·/src

 

2.依旧在父组件App.vue下script中import下面输入如下代码:

注册组建

export default {

        component:{

                'Left'  : Left//因为这里键值对和值都一样，所以可以缩写 Left 就OK了

        }

 }

 

3.父组件App.vue中template>div标签内直接以标签的形式应用注册好的组建即可

<Left></Left>

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc3R1ZHllcue9kQ==,size_20,color_FFFFFF,t_70,g_se,x_16

以上是Left.vue就是App.vue的私有组建，如果其他组建要用Left.vue组建依旧要经历这三个步骤，如果某个组建用的比较频繁，我们可以定义全局组建，然后在所需组建里直接调用就行了:

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAc3R1ZHllcue9kQ==,size_20,color_FFFFFF,t_70,g_se,x_16

 MyCount这里可以随便取名字，一般首字母大写取什么名字后面组建使用就用<MyCount组建名></MyCount组件名>

 

 

 

studyer网
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue组件
sjs1766349405的博客
12-03 1461
一、组件化 1.简介 组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件 2.全局注册组件 <body> <div id="app"> <my-header></my-header> <my-header>&l
Vue组建的使用（详细步骤）
weixin_44717159的博客
07-23 498
Vue组件的使用详细步骤 我们在了解vue的目录时，可只知道在src文件夹下 1.
vue之创建组建
aaronthon的博客
07-08 736
vue的核心基础就是组件的使用，玩好了组件才能将前面学的基础更好的运用起来。组件的使用更使我们的项目解耦合。更加符合vue的设计思想MVVM。 那接下来就跟我看一下如何在一个Vue实例中使用组件吧！ 这里有一个Vue组件的示例： Vue.component('Vheader',{ data:function(){ ...
vue-cli内.vue组件嵌套.vue组建
刚刚好
06-07 1854
&lt;template&gt; &lt;div&gt; &lt;p class="p1"&gt;Hello ,This is {{page_name}} now&lt;/p&gt; &lt;test/&gt; &lt;!-- 3.使用 --&gt; &lt;hello&gt;&lt;/hello&gt;
Vue学习笔记——第二部分
codeqingchen的博客
09-06 1060
Vue组件的定义、注册方式和模板使用 组件的定义 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码. vue组件是把页面（html代码，CSS代码）进行模块化 如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。 vue.js中创建组件有三个步骤：定义组件，注册组件以及使用组件 定义组件 方式1：先创建一组件构造器，然后由组件构造器创建组件。如：var myCom = Vue.extend({}) 方式2：
vue使用swiper.js重叠轮播组建样式
10-16
标题中提到的“vue使用swiper.js重叠轮播组建样式”涉及的关键知识点主要包括如何在Vue项目中引入并使用Swiper.js库，以及如何调整Swiper.js的配置选项来实现一个垂直滚动且有重叠效果的轮播组件。 描述中强调了...
vue-range-slider：Vue.js的简单滑块组件
02-05
视距滑块 Vue.js的简单滑块组件 ...只需导入vue-range-slider组件并在您的组件中使用它即可。 这些道具与本机input[type="range"]元素兼容，因此您可以像本机元素一样使用min ， max ， step等。 < range-slid
vue2.0多条件搜索组件使用详解
08-30
Vue 2.0 多条件搜索组件使用详解 Vue 2.0 多条件搜索组件是 Vue Framework 中一个功能强大且灵活的搜索组件，能够满足各种搜索需求。该组件支持多个搜索条件的输入、选择和排列，且可以根据需要动态添加或删除搜索...
Vue组件
mzgcsdn的博客
03-16 373
组件定义： 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。 一、Vue组件分为两种： 1.全局组件 注意问题：全局组件一定要在Vue实例化之前创建 例： Vue.component("my-comp", { templa
Vue -组件
张锦的博客
04-12 4687
1、组件的作用： 组件（Component）是Vue.js最强大的功能之一。. 组件可以扩展HTML元素，封装可以重复使用的代码。. 在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。 2、组件的分类： 在vue中组件可以分为全局组件和局部组件。 全局组件：所谓的全局组件就是不仅仅可以在一个vue实例中使用，在其他vue实例中也可以使用 的组件。 局部组件：所谓的局部组件就是只能在某个vue实例中使用的组件，在其他的vue实例中不能使 ...
Vue如何创建组件
HELLO WORLD
03-15 783
目录组件的概念全局注册语法示例注意事项局部注册语法示例注意事项 组件的概念 组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树： 每个组件都是相互独立的，组件是需要创建和注册之后才能使用的。注册分为全局注册和局部注册两种方式。 全局注册 语法 Vue.component('component-nam...
【Vue组件详解（一）】
热门推荐
小田是个程序员的博客欢迎你的到来呀~
04-07 1万+
卷起来兄弟们！本篇文章主要介绍了Vue中组件的详细知识，以图形和实例相结合的方式带你一步一步入手Vue组件！！！
vue组件及使用
xiamoziqian的博客
06-20 230
1.全局组件 组件是一个特殊的实例。 全局组件通过Vue.component()方法定义 <div id="app"> <!-- 组件使用：当自定义标签，真正渲染的是组件的template--> <!--dom元素的模版中必须用双标记，不可用单标记，因为有时会出问题--> <my-button></my-button> <m...
VUE中的组件
最新发布
weixin_52633911的博客
01-12 493
对Vue中组件的介绍
详解vue组件三大核心概念
weixin_34183910的博客
05-30 3666
前言 本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。 本文的代码请猛戳github博客，纸上得来终觉浅，大家动手多敲敲代码！ 一、属性 1.自定义属性props prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最...
Vue组件详解
说故事的五公子
07-20 1412
1.什么是组件化 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个
4. 前端框架—Vue组件化
weixin_45267102的博客
11-11 440
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。在vue里，所有的vue实例都是组件。 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。
Vue怎么引入组建
05-28
在 Vue 中引入组件有两种方式：全局注册和局部注册。 1. 全局注册 全局注册组件可以在任何 Vue 实例的模板中使用。可以使用 Vue.component() 方法注册一个全局组件。 例如，我们有一个 Hello 组件： ``` <template> <div> <h1>Hello {{ name }}!</h1> </div> </template> <script> export default { name: 'Hello', props: { name: { type: String, required: true } } } </script> ``` 然后我们可以在任何地方使用它，只需要在 Vue 实例中先注册一下： ``` import Vue from 'vue' import Hello from './Hello.vue' Vue.component('hello', Hello) ``` 现在，我们就可以在任何 Vue 实例的模板中使用 `<hello>` 标签了。 2. 局部注册 局部注册组件只能在当前 Vue 实例的模板中使用。可以使用 components 选项注册一个局部组件。 例如，我们有一个 Hello 组件： ``` <template> <div> <h1>Hello {{ name }}!</h1> </div> </template> <script> export default { name: 'Hello', props: { name: { type: String, required: true } } } </script> ``` 然后我们可以在当前 Vue 实例的 components 选项中注册一下： ``` <template> <div> <hello :name="name"></hello> </div> </template> <script> import Hello from './Hello.vue' export default { name: 'App', components: { Hello }, data() { return { name: 'World' } } } </script> ``` 现在，我们就可以在当前 Vue 实例的模板中使用 `<hello>` 标签了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

studyer网

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值