Vue初学——组件的初步使用

最新推荐文章于 2024-08-01 03:56:53 发布
最新推荐文章于 2024-08-01 03:56:53 发布
阅读量472 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wfy17030212/article/details/122089537
版权

刚学习到组件，感觉这是一个很神奇的东西，但是官方文档上的介绍却又让人难以理解，只是草草记下了大致的步骤，接下来我们深入探究一下组件

基础的组件介绍

其实组件就是一个独立的Vue实例，它同样也有着Vue实例所拥有的各种属性，例如data,methods,computed等

组件的创建分为三部

  1. 创建组件构造器对象
  2. 注册组件
  3. 使用组件

传统的构造组件方法

//创建组件构造器对象
const mycomponent=Vue.extend({
	template:`
	<div>
		<h2>我是标题</h2>
		<p>我是内容21!</p>
		<p>我是内容12!</p>
	</div>`
});

那就是通过这个extend方法来看，那么我们很明显的能看出，这template中的代码看的有点让人恶心，尤其是放到编译器中后，没有自动补全不说，还没有对齐。

传统的注册组件方法

Vue.component('cpntest',mycomponent);

component方法的第一个参数是你要创建的组件名，第二个就是你所存放组件的变量名了

使用组件方法

<cpntest></cpntest>

总代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 使用组件 -->
			<cpntest></cpntest>			
		</div>
	</body>
	<script type="text/javascript">
		//创建组件构造器对象
		const mycomponent=Vue.extend({
			template:`
			<div>
				<h2>我是标题</h2>
				<p>我是内容21!</p>
				<p>我是内容12!</p>
			</div>`
		});
		//注册组件
		Vue.component('cpntest',mycomponent);
		
		var vm=new Vue({
			el:'#app'
		});	
	</script>
</html>

而实际上，Vue.component('cpntest',mycomponent);由这种注册组件的注册的组件被称为全局组件，它是在整个文件中都有效的。

局部组件创建

var vm=new Vue({
	el:'#app',
	components:{
		cpntest:mycomponent
	}
});

这一种创建出来的组件被称为局部组件，它只在所创建的Vue实例中能够使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<cpntest></cpntest>				
		</div>
		<div id="">
			<cpntest></cpntest>
		</div>
	</body>
	<script type="text/javascript">
		//创建组件构造器对象
		const mycomponent=Vue.extend({
			template:`
			<div>
				<h2>我是标题</h2>
				<p>我是内容21!</p>
				<p>我是内容12!</p>
			</div>`
		});
		//注册组件
		//Vue.component('cpntest',mycomponent);
		
		var vm=new Vue({
			el:'#app',
			components:{
				cpntest:mycomponent
			}
		});	
	</script>
</html>

此时如果你把该组件放在Vue实例外，那么就找不到了

父组件和子组件和根组件

在extend方法中，也有着一个components属性，同样可以在里面注册主键，那么如果把A组件放在B组件中注册，然后B组件在一个Vue实例中注册，B组件就为父组件，A组件就为子组件，而该Vue实例也可以被称为根组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<test2></test2>
		</div>
	</body>
	<script type="text/javascript">
		const cpn1=Vue.extend({
			template:`
			<div>
				<h2>我是标题1</h2>
				<p>我是内容21!</p>
				<p>我是内容12!</p>
			</div>`			
		});
		
		const cpn2=Vue.extend({
			template:`
			<div>
				<h2>我是标题2</h2>
				<p>我是内容21!</p>
				<p>我是内容12!</p>
				<test1></test1>
			</div>`,
			components:{
				test1:cpn1
			}
		});
		var vm=new Vue({
			el:'#app',
			data:{
				
			},
			components:{
				test2:cpn2
			}
		});
	</script>
</html>

在这里插入图片描述
如果再想使用子组件,就不可以了，因为你在父组件调用时会直接将子组件中的html渲染好，而如果这时你还想在Vue实例中调用，就找不到了,真是无情啊:)
在这里插入图片描述

组件的语法糖形式

前面也能够发现,那用``这种形式，还要将html包括在里面实在是太过反人类，因此也就有了语法糖格式template:'#testctn2'

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
		</div>
		<template id="testctn2">
			<div>
				<h2 @click="fun()">{{title}}</h2>
				<p>我是内容21!</p>
				<p>我是内容12!</p>
			</div>
		</template>
	</body>
	<script type="text/javascript">
		Vue.component('cpn',{
				template:'#testctn2',				
				data(){
					return {
						title:'abc',						
					}
				}
			});
		var vm=new Vue({
			el:'#app',
		});
	</script>
</html>

组件中的data为什么是一个方法的形式，而不是像Vue实例一样为一个属性


<body>
		<div id="app">
			<calculator></calculator>
			<calculator></calculator>
			<calculator></calculator>
		</div>
		<template id="calc">
			<div>
				<h2>计数器</h2>
				<h3>{{count}}</h3>
				<button type="button" @click="increasment()">+</button>
				<button type="button" @click="decreasment()">-</button>
			</div>
		</template>
</body>
Vue.component('calculator',{
	template:'#calc',
	data(){
		return {count:0}
	},
	methods:{
		increasment(){
			this.count++;
		},
		decreasment(){
			this.count--;
		}
	}
})

在这里插入图片描述

如果同时用三次一个组件，那么就会每次返回三个值，这三个值互不影响。


<body>
		<div id="app">
			<calculator></calculator>
			<calculator></calculator>
			<calculator></calculator>
		</div>
		<template id="calc">
			<div>
				<h2>计数器</h2>
				<h3>{{obj}}</h3>
				<button type="button" @click="increasment()">+</button>
				<button type="button" @click="decreasment()">-</button>
			</div>
		</template>
</body>
const obj=0;
Vue.component('calculator',{
	template:'#calc',
	data(){
		return obj				
	},
	methods:{
		increasment(){
			this.obj++;
		},
		decreasment(){
			this.obj--;
		}
	}
})

但是如果公用同一个变量而不是返回值的话，三个值将都会改变，因为这三个按钮改变的都是一个值，而不是像一一return一样返回。其实这就是我们所看到的常见的实例化方式。

var vm=new Vue({
	el:'#app',
	data:{
		count:0
	}
});

而这往往不是我们想要的结果,因此组件要变成像函数一样的形式返回值

尖兵果子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue组件化编程
shisannnn的博客
09-13 578
1.Vue中使用组件的三大步骤： 定义组件（创建组件） 注册组件 使用组件（写组件标签） 一、如何定义一个组件： 使用Vue.extend（options），其中options和new Vue（options）时传入的那个options几乎一样，但也有点区别： el不要写，为什么？——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器 data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系。 备注：使用template可以配置组件结构 二、如何注册组件？ 局部注册：
[学习笔记]Vue自定义组件——传值，插槽的使用
iufesjgc的博客
11-04 1782
用了这么久的vant和element，我这个小白也简单地了解了别人的组件是怎么写出来的，特此记录一下。 举个简单的例子，拿自己定义的mainTitle举例，这个组件用在商城顶部的标题，分成三块，最左侧是返回键←，中间是标题内容，最右侧是退回主页×。 html代码如下（利用了vant组件） <template> <div> <van-sticky class="maintitle"> //vant粘性布局 <van-row>
Vue 组件的使用
白怀宇的博客
06-13 202
Vue 组件的使用 组件的两种命名方式 使用 kebab-case Vue.component('my-component-name', { /* ... */ }) 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 。 使用 PascalCase Vue.component('MyComponentName', { /* ... */ }) 当使用 PascalCase (首字母大写命名) 定义一个组件时
Vue3 学习笔记（九）——Vue组件的使用
最新发布
weixin_33509141的博客
08-01 342
  Vue 的组件可以按两种不同的风格书写：选项式 API和组合式 API。选项式 API 是在组合式 API 的基础上实现的！关于 Vue 的基础概念和知识在它们之间都是通用的。  在生产项目中：    ① 当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用 Vue，例如渐进增强的应用场景，推荐采用选项式 AP...
vue组件的使用
qq_34771938的博客
11-05 203
一、组件的基础 1. 组件的定义 定义组件：应用API（component）。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
vue 组件的使用
m0_72231852的博客
01-01 401
Vue 组件是 Vue.js 中的一个重要概念，它允许开发者将页面拆分成多个可复用的、独立的部分。在 Vue 中，组件可以包含 HTML 模板、JavaScript 逻辑和 CSS 样式等内容。本文将介绍 Vue 组件的基本使用方法。本文介绍了 Vue 组件的基本使用方法，包括创建组件、使用组件以及如何向组件传递数据和事件。通过学习这些基本操作，你可以更好地利用 Vue 组件来构建复杂的单页应用。
前端VUE实战——去哪儿网项目实战.7z
08-17
在本项目中，我们将深入探讨基于Vue.js框架的前端实战应用——去哪儿网项目。Vue.js是一个轻量级、高性能的JavaScript框架，专为构建用户界面而设计，特别适合开发单页面应用（SPA）。通过这个实战项目，我们可以...
Vue 组件复用多次自定义参数操作
10-15
父组件使用该组件时，只需要导入并定义相应的`options`数据，然后监听`my-event`事件来获取选择的值： ```vue <vSelect :options="options" @my-event="select"></vSelect> import vSelect from '文件路径'; ...
vue vuex vue-rouert后台项目——权限路由（适合初学）
08-28
vue vuex vue-router 后台项目——权限路由详解 本文将详细介绍 vue vuex vue-router 后台项目中的权限路由机制，旨在帮助初学者快速了解 vue+vuex+vue-router 的关系。 项目概述 本项目是一个简单的后台项目，...
大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用_vue seamless scroll官网
2401_84411822的博客
04-27 2517
,setup() {title: “Vue3.0 无缝滚动组件展示数据第1条”,},title: “Vue3.0 无缝滚动组件展示数据第2条”,},title: “Vue3.0 无缝滚动组件展示数据第3条”,},title: “Vue3.0 无缝滚动组件展示数据第4条”,},title: “Vue3.0 无缝滚动组件展示数据第5条”,},title: “Vue3.0 无缝滚动组件展示数据第6条”,},
Vue组件的使用
weixin_64770583的博客
07-16 4229
一：什么是Vue组件？干什么用的？ 二：组件的使用 1.非单文件组件 （1）定义：一个文件中包含有n个组件 （2）非单文件组件的使用步骤 （非单文件组件扩展知识点） 1.关于组件名: 2.关于组件标签 3.一个简写方式: 2.单文件组件 ：实际开发中大部分使用的都是单文件组件............
vue组件使用方法
千锋教育
03-07 455
Vue 组件是 Vue.js 应用中可复用的代码块，通过组件可以将一个页面拆分为多个独立的部分，使代码更加清晰，结构更加简洁。以上是使用 Vue 组件的基本步骤，当然还有很多其他的配置和使用方式，你可以参考 Vue.js 官方文档进行学习和使用。3. 将组件挂载到实例上：创建 Vue.js 实例时，可以通过。1. 创建组件：在 Vue.js 中，可以通过。
vue组件及使用
xiamoziqian的博客
06-20 233
1.全局组件 组件是一个特殊的实例。 全局组件通过Vue.component()方法定义 <div id="app"> <!-- 组件使用：当自定义标签，真正渲染的是组件的template--> <!--dom元素的模版中必须用双标记，不可用单标记，因为有时会出问题--> <my-button></my-button> <m...
vue的组件及运用
weixin_30482181的博客
05-31 95
❤记在前面 享受一个微雨的夜晚··· ··· 【前面学了vue-router，今天开始正式搭建页面，先从首页开始，在搭建页面的过程中，也会穿插vue的知识点】 今天先来讲下组件，然后搭个头部组件实现复用 【组件基础官方文档：https://cn.vuejs.org/v2/guide/components.html】 一 、官方解读 1.官方怎么说？...
VUE组件的基本使用
guoguo0717的博客
05-25 1843
什么是组件化？ ◼ 我们将一个完整的页面分成很多个组件。 ◼ 每个组件都用于实现页面的一个功能块。 ◼ 而每一个组件又可以进行细分。 ◼ 人面对复杂问题的处理方式： ◼ 任何一个人处理信息的逻辑能力都是有限的 ◼ 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 ◼ 但是，我们人有一种天生的能力，就是将问题进行拆解。 ◼ 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 ◼ 组件化也是类似的思想： ◼ 如果我们将一个页面中所有的处理
vue 组件使用说明
知行合一
04-14 828
vue 组件使用说明 一个组件实质上是一个拥有预定义选项的一个 Vue 实例 在header组件内部允许外部使用，需要导出属性，有2种导出方法
vue组件-基本使用
白羊座的橙子
02-24 137
1、什么是组件化？ 组件化是Vue.js中的重要思想 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用 任何应用都会被抽象成一棵组件树 组件化思想的应用： 有了组件化的思想，我们需要在之后的开发中，充分的利用它尽可能将页面拆分成一个个小的，可复用的组件，这样让我们的代码更加方便组织和管理，并且扩展性也更强 2、注册组件的基本步骤 1)创建组件构造器 2)注册组件 3)使用组件 <div id="app"> //3、使用组件 .
Vue组件实战：实现可搜索下拉框功能与实例教程
在本篇文章中，我们将深入探讨Vue组件实践中的一个重要特性——可搜索下拉框功能。作者针对Vue框架开发了一个可自定义的下拉菜单组件，允许用户在输入框内进行搜索筛选选项。这个组件的核心是利用Vue的双向数据绑定...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值