前端知识-vue-3、组件化开发

最新推荐文章于 2024-05-10 23:39:40 发布
最新推荐文章于 2024-05-10 23:39:40 发布
阅读量1k 收藏 2
点赞数 2
分类专栏： 前端知识 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44844572/article/details/121891457
版权

什么是组件？

 1、组件注册和使用

1、注册全局组件

 方式一：使用全局的Vue直接注册：Vue.component

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<!-- 使用自定义的组件 -->
			<my-header></my-header>
			<h1>{{name}}</h1>
			<my-header></my-header>
			<h1>{{name}}</h1>
		</div>
		
		
		<script type="text/javascript">
			// 创建一个组件对象
			const header = {
				// 组件中封装的HTML内容
				template:`
					<div class="header" style="height:100px;background: #FF0000 ;">
						<b>python{{headname}}</b>
						<b>java{{age}}</b>
					</div>`,
				
						
				// 组件的data是一个函数，数据写在return返回的对象中
				data(){
					return{
						headname:"headers",
						age:18,
						sex:'nan'
					}
				},
				methods:{
					
				}
			}
			
			// 全局组件的注册
			Vue.component('my-header',header)
				
		
			//实例化vue对象
			var vm = new Vue({
				el:'#app',
				data:{
					name:'guaniu'
				}
			})
		</script>
	</body>
</html>

2、组件的使用

在template中之间使用组件名的闭合标签使用

<my-header></my-header>

3、组件使用的注意点

        1、组件中的data必须是一个函数，子组件中的数据是独立的

        2、组件的模板必须要包含一个根元素

        3、组件中的模板内容可以是字符串的形式

        4、组件的命名和使用注意点：

                如果组件使用驼峰式命名规则命名（HelloWorld），在字符串模板中，可以使用驼峰式命名规范（HelloWorld）

                在普通的标签模板中使用时，要使用（hello-world）

4、局部组件注册

使用vue实例的components配置项进行注册
注意点：局部组件只能在注册他的父组件中使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			<!-- 使用自定义的组件 -->
			<my-header></my-header>
			<h1>{{name}}</h1>
			<my-header></my-header>
			<h1>{{name}}</h1>
		</div>
		
		
		<script type="text/javascript">
			// 创建一个组件对象
			const header = {
				// 组件中封装的HTML内容
				template:`
					<div class="header" style="height:100px;background: #FF0000 ;">
						<b>python{{headname}}</b>
						<b>java{{age}}</b>
					</div>`,
				
						
				// 组件的data是一个函数，数据写在return返回的对象中
				data(){
					return{
						headname:"headers",
						age:18,
						sex:'nan'
					}
				},
				methods:{
					
				}
			}
			
			//实例化vue对象
			var vm = new Vue({
				el:'#app',
				data:{
					name:'guaniu'
				},
				// 注册局部组件
				components:{
					"my-header":header
				}
			})
		</script>
	</body>
</html>

2、父组件往子组件中传数据

实现步骤：

        1、子组件内部定义props接收传递过来的值

        2、父组件在使用子组件时通过属性将值传递给子组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-box myname='瓜牛' position='高级测试工程师'></my-box>
			<my-box myname='瓜牛1' position='高级测试开发工程师'></my-box>
			<my-box myname='瓜牛2' position='高级性能测试工程师'></my-box>
		</div>
		
			
		
		<script type="text/javascript">
			const myBox = {
				template: `
				<div style="width: 400px;height: 300px; box-shadow: 0 0 5px #00AAFF;">
				<h1>名字：{{myname}}</h1>
				<h1>职位：{{position}}</h1>
				</div>	
				`,
				data(){
					return{
					}
				},
				// 给子组件定义属性（父组件中传递）
				props:[
					'myname','position'
				]
			
			}
		
			Vue.component('my-box',myBox)
			
			//实例化vue对象
			var vm = new Vue({
				el:'#app',
				data:{
				}
			})
			
		</script>
	</body>
</html>

props传值的注意点：

        1、子组件中props可以以驼峰形式规则接收参数(使用MenuTitle接收，使用menu-title传递，)

       2、字符串的模板中可以使用驼峰形式，传递参数

       3、非字符串的模板中(父组件)传递值的时候要使用下划线的命名形式(menu-title）

3、子组件往父组件中传数据

        1、子组件中自定义一个事件

                通过$emit 触发自定义的事件，并分别传入对应的参数。

        2、在父组件中监听事件

        监听子组件中定义的事件，当触发事件时，子组件中传递过来的数据，父组件可以通过$event来接收。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--
				子组件中可以通过$emit触发自定义的事件。
				父组件时使用子组件时，可以通过事件绑定的形式，去监听子组件中的事件
			 -->
			<my-box @del='handelDel($event)' @update='handelUpdate'></my-box>
			<my-box @del='handelDel' @update='handelUpdate'></my-box>
			
			<h1>父组件中的number:{{number}}</h1>
			
		</div>
		
			
		
		<script type="text/javascript">
			const myBox = {
				template: `
				<div style="width: 400px;height: 300px; box-shadow: 0 0 5px #00AAFF;">
				<h1>名字：{{myname}}</h1>
				<h1>职位：{{position}}</h1>
				<button @click="$emit('del',200)">删除</button>
				<button @click="$emit('update',300)">修改</button>
				</div>	
				`,
				data(){
					return{
						myname:"瓜牛",
						position:"高级测试工程师"
					}
				}
			
			}
		
			Vue.component('my-box',myBox)
			
			//实例化vue对象
			var vm = new Vue({
				el:'#app',
				data:{
					number:500
				},
				methods:{
					handelDel(value){
						this.number = value
					},
					handelUpdate(value){
						this.number = value
					}
				}
			})
			
		</script>
	</body>
</html>

4、兄弟组件之间传数据

实现步骤：

        1、创建一个全局事件管理中心

// 定义事件中心
var hub = new Vue();

        2、监听事件: $on

// 组件A中 监听事件
mounted: function () {
  // 事件中心监听事件
  hub.$on('demo2-event', (val) => {
 this.count += val;
})
}

        3、触发事件:$emit

// 组件B中，触发兄弟组件监听的事件，并传入对应的值
methods: {
  handle: function () {
 hub.$emit('demo2-event', 10);
 }
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<my-box1></my-box1>

			<my-box2></my-box2>

		</div>
		<script type="text/javascript">
			//  1、创建一个全局的事件中心
			var hub = new Vue()

			// 定义组件
			var myBox1 = {
				template: `
					<div style="width: 300px;height: 200px;box-shadow: 0 0 5px #55AA7F;">
						<h1>显示数据的组件</h1>
						<h2>{{value}}</h2>
						<button type="button" @click='handel'>box1Event</button>
					</div>
				`,
				data() {
					return {
						value: 0
					}
				},
				methods: {
					handel() {
						hub.$emit('box1Eevnt', 9999)
					}
				},
				// 在组件box1中监听事件中的触发事件
				mounted() {
					hub.$on('changeValue', (val) => {
						// 将事件传递过来的数据保存到当前组件中
						this.value = val
					})
				}
			}
			var myBox2 = {
				template: `
					<div style="width: 300px;height: 200px;box-shadow: 0 0 5px #55AA7F;">
						<h1>选择数据的组件</h1>
						<button type="button" @click='selectValue(1000)'>1000</button>
						<button type="button" @click='selectValue(2000)'>2000</button>
						<button type="button" @click='selectValue(3000)'>3000</button>
						
							<h2>{{value}}</h2>
					</div>
				`,
				data() {
					return {
						value: 0
					}
				},
				methods: {
					// 在组件box2中 触发事件中心的changeValue事件，并传递参数
					selectValue(val) {
						hub.$emit('changeValue', val)
					}
				},
				mounted() {
					hub.$on('box1Eevnt', (val) => {
						// 将事件传递过来的数据保存到当前组件中
						this.value = val
					})
				}

			}

			// 创建一个vue实例
			var vm = new Vue({
				el: '#app',
				data: {},
				// 注册组件
				components: {
					'my-box1': myBox1,
					'my-box2': myBox2
				},

			})
		</script>

	</body>
</html>

5、插槽

        插槽的作用：实现父组件往子组件中传递内容

1、组件插槽

        定义组件时定义插槽

Vue.component('test-demo1', {
    // 组件的模板
    template: `
    <div>
    <span>slot预留一个插槽</span>
    <slot></slot>
    </div>
    `,
 });

     使用组件时，可以往插槽中传递内容

<test-demo1>
  <h1>往插槽中插入的内容</h1>
</test-demo1>

2、具名插槽

        定义插槽时，通过name属性给插槽设置一个名字

Vue.component('test-demo1', {
   // 组件的模板
   template: `
    <div>
      <div class='box1'>
        <slot name="demo1"></slot>
      </div>
      <div class='box2'>
        <slot name="demo2"></slot>
      </div>
    </div>
   `,
 });

        使用组件时，通过slot指定插槽的名字

                注意点：插入多个标签时，通过template来包裹要插入的内容

<div id="app">
  <test-demo1>
    <template slot="demo1">
      <h1>demo1中插入的h1标签</h1>
      <h2>demo1中插入的h1标签</h2>
    </template >
    <p slot="demo2">给demo2插入的数据</p>
  </test-demo1>
</div>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">

			<my-box>
				<div slot="title">标题</div>
				<p>666666</p>
				<p>777777</p>
				<p>888888</p>
				<div slot="footer">footer部分的内容</div>
			</my-box>
		
		</div>
		
		
		
		<script type="text/javascript">
			const myBox = {
				template: `
				<div style="width: 300px;height: 500px; box-shadow: 0 0 5px #00AAFF;">
					<div style="height: 100px;background: #00FFFF;">title:
					<slot name='title'></slot></div>
					<div style="height: 100px;background: #00aa7f;">
					<slot></slot></div>
					<div style="height: 100px;background: #ffaa7f;">footer:
					<slot name='footer'></slot></div>
					
				</div>	
				`,
				data(){
					return{
					}
				}
			
			}
		
			Vue.component('my-box',myBox)
			
			//实例化vue对象
			var vm = new Vue({
				el:'#app',
				data:{
					number:500
				},
				methods:{

				}
			})
			
		</script>
	</body>
</html>

未完待续，点个关注，持续更新。。。

瓜牛强强
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
前端-Vue-开发环境配置
04-23
该资源主要是帮助前端初学者快速搭建前端开发环境并配置运行起来，提升初学者的前期准备工作效率，文档中有不清晰的地方欢迎随时沟通交流。
vue 3 第三十一章：状态管理（Pinia基础知识）
to_the_Future的博客
06-01 2734
状态管理是现代 Web 应用开发中的一个重要概念。Vue 3 中的状态管理库Pinia，是一个基于的状态管理库，它提供了一种简单灵活的方式来管理应用程序的状态，同时还具有高性能和可扩展性。Pinia在某种程度上来说，也可以被叫做Vuex5，因为它结合了Vuex 5核心团队讨论中的许多想法，所以Pinia被作为新的推荐方案来代替Vuex。
Vue3组件库开发项目实战——01组件开发必备知识导学
最新发布
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
05-10 1262
组件化开发的重要性：在现代前端开发中，组件化已经成为一种标准实践。组件化允许开发者将复杂的用户界面分解成小的、独立的、可复用的部分。通过解决组件开发中的问题，开发者可以学习到如何处理数据流、状态管理、事件处理等关键概念。组件库的开发往往需要考虑如何组织代码、如何进行模块化、如何处理依赖管理等工程问题。这些实践有助于提升工程架构能力，使开发者能够构建出可扩展、可维护的大型应用。
Vue3 源码阅读（10）：组件化 —— 实现原理
f18855666661的博客
08-24 1906
组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。
vue3(三)——组件
qq_60893085的博客
07-19 832
我们封装一个CounterOperation.vue的组件∶内部其实是监听两个按钮的点击，点击之后通过this.$emit的方式发出去事件;
Vue3学习之旅-之vue3组件化(一)---＞父子组件通信
听雨少年的博客
08-08 1287
文章目录Vue3组件化(一)-父子组件通信组件的嵌套认识组件的嵌套组件的拆分组件的通信组件的通信父子组件之间通信的方式父组件传递给子组件Props的数组用法Props的对象用法细节一：type类型细节二：对象类型的其他写法细节三：Prop 的大小写命名非Prop的Attribute禁用Attribute继承和多根节点子组件传递给父组件子组件传递给父组件自定义事件的流程自定义事件的参数和验证 vue3笔记 vue3学习之旅–邂逅vue3-了解认识Vue3 vue3学习之旅–邂逅vue3-了解认识Vue3(二)
【Vue3 第十一章】组件化基础
前端知识分享喵
01-09 309
组件化基础
前端-Vue3.x-知识图谱
02-19
这份“前端-Vue3.x-知识图谱”旨在全面概述Vue3.x的核心概念、特性和最佳实践。 一、核心概念 1. **Composition API**：Vue3.x引入了Composition API，允许开发者以模块化的方式组织代码，提高了代码的可复用性...
前端开发-vue级联地址选择器的纯前端实现-基于javascript来实现.zip
04-02
在前端开发中，Vue.js作为一个流行的JavaScript框架，常被用于构建用户界面，提供高效的数据绑定和组件化功能。本项目“Vue级联地址选择器的纯前端实现”着重讲解如何利用Vue.js和JavaScript来创建一个交互式的地址...
前端开发-基于Vue开发的商城前端实现.zip
04-02
1. **组件化开发**：Vue的核心特性之一是组件化，它允许我们将UI拆分为可复用的组件，每个组件都有自己的视图和数据逻辑。在商城开发中，如商品列表、购物车、个人中心等都可以抽象为独立的组件。 2. **虚拟DOM**：...
easyplayer--基于Vue框架、组件化开发的第三方网易云音乐播放器
09-02
本文将深入探讨"easyplayer"，这是一个利用Vue.js框架和Element-UI库进行组件化开发的第三方网易云音乐播放器。该播放器具备丰富的功能，包括网易云音乐账号登录、MV播放以及歌词显示等，为用户提供了便捷且个性化的...
Vue3 | 基础语法 与 生命周期知识及案例详解
aaLiweipeng的博客
02-13 263
完整原文地址见简书https://www.jianshu.com/p/8fa37a3c8e6e createApp()、mount()、MVVM、根组件实例 -【createApp()】Vue.createApp()，创建Vue应用实例，开始使用Vue； -【mount()】.mount()指定在哪个组件上使用Vue (这个在《Vue3 | 基本特性概念 与语法的 应用与案例》中已经讲过了)；...
13.vue3组件化开发
phoebemeng的博客
09-05 1317
学习笔记：动态组件，异步组件，认识生命周期，组件的v-model
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 9772
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
【vue.js 3.0】 初级知识点汇总（建立Vue工程）
qfzhangwei的专栏
10-30 527
vue 中的计算属性getter/computed 注意：计算属性是有cache的，业务计算不要使用。解释： 创建一个应用程序 HelloApp，把这个应用绑定到这个页面的一个div上去。简化v-bind和v-on。vue对象实例的生成和使用。v-model 双向绑定。v-for 循环一个数组。
【Vue3】项目实战前基本知识
weixin_44899940的博客
02-06 1018
Vue3，从新建项目-基本属性-易犯错误-代码规范！
VUE2---＞组件化
ClearloveYt的博客
07-28 485
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios。这种可以直接下载并在项目中使用的现成组件，就叫做。通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过。element-ui 组件，或是根据需求，只。② vue 项目发现请求的接口不存在，把请求。devServer.proxy 属性的值，跨域资源共享，因此默认情况下，上面的接口。，我们可以只引入需要的组件，以达到。，比如 Button，那么需要在。vue-cli 提供了创建项目的。
【前端-VUE+TS】Vue3组件化-知识补充（六）
qq_48234463的博客
01-30 1131
【前端-VUE+TS】Vue3组件化知识补充
Vue前置必会知识点
qq_41152805的博客
01-07 539
学习vue前置知识点
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值