vue组件化(vue2)

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

vue组件化

任何应用都可以抽象成一颗组件树

组件注册过程

  • 创建组件构造器 Vue.extend 要传一个对象,一个模板
  • 注册组件 Vue.component
  • 使用组件
		//1.第一种方法
		//vue cli 脚手架构造vue项目 vue构造vue
		//必须得放在实例中，比如<div>标签下，否则无用，而且得是vue实例
		//全局组件
		<div id="app">
			<my-cpn></my-cpn>
		</div>
		<script type="text/javascript">
			//1.构造
			const cpnC=Vue.extend({
				template:`<h1>Hello World</h1>`
			})
			//2.注册 全剧注册
			//Vue.component(组件名,组件构造器)
			Vue.component('my-cpn',cpnC);
			const app=new Vue({
				el:"#app",
		</script>

全局组件

全局都可以使用

局部组件

局部注册

		<div id="app">
			<my-cpn></my-cpn>
			<!-- <myCpn2></myCpn2> --><!--错误-->
			<my-cpn2></my-cpn2>
		</div>
		<script type="text/javascript">
			//1.构造  全局组件
			const cpnC=Vue.extend({
				template:`<h1>Hello World</h1>`
			})
			//2.注册
			//Vue.component(组件名,组件构造器) 注册方式是全局注册
			Vue.component('my-cpn',cpnC);
			const app=new Vue({
				el:"#app",				
				components:{
					//cpn是注册组件的标签名，不能携带-，否则报错，可以使用驼峰命名,然后标签名用-链接
					myCpn2:cpnC
				}
			})
		</script>

父子组件

		<div id="app">
			<cpn2></cpn2>
			<!-- <cpn1></cpn1> --><!--错误，要么全局，要么在实例中-->
		</div>
		<script type="text/javascript">
			//1.构造 第一个
			const cpnC1=Vue.extend({
				template:`<h1>我是子组件</h1>`
			})
			//2.构造第二个
			const cpnC2=Vue.extend({
				template:`
				<h1>我是父组件</h1>
				<cpn1></cpn1>
				
				`,
				components:{
					//cpnC2父组件，cpnC1子组件 本质来看vue也是一个父组件而且是顶层组件，root
					//关键的父组件必须包含子组件，也就是不能让子组件并行和其她标签显示
					/*
					对的
					template:`
					<div>
						<h1>我是父组件</h1>
						<cpn1></cpn1>
					</div>
					`,
					错的
					template:`
					<h1>我是父组件</h1>
					<cpn1></cpn1>
					`,
					错误为 template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
					也就是说要有个根
					*/
					cpn1:cpnC1
				}
			})
			
			
			const app=new Vue({
				el:"#app",				
				components:{
					//cpn是注册组件的标签名，不能携带-，否则报错，可以使用驼峰命名
					cpn2:cpnC2
				}
			})
		</script>
父子组件语法糖

全局组件

		<div id="app">
			<cpn1></cpn1>
		</div>
		<script type="text/javascript">
			//1.
			Vue.component('cpn1',{
				template:`<div><h1>hello</h1></div>`
			})
			const app=new Vue({
				el:"#app",				
				components:{

				}
			})
		</script>

局部组件

		<div id="app">
			<cpn1></cpn1>
			<cpn2></cpn2>
		</div>
		<script type="text/javascript">
			//1.全局
			Vue.component('cpn1',{
				template:`<div><h1>全局注册语法糖</h1></div>`
			})
			const app=new Vue({
				el:"#app",				
				components:{
					//局部
					'cpn2':{
						template:`<div><h1>局部注册语法糖</h1></div>`
					}
				}
			})
		</script>

组件模板抽离

一旦在模板中出现了很多的html将会很复杂

  • 在script里写
  • template标签里写
	<body>
		<div id="app">
			<cpn1></cpn1>
			<cpn2></cpn2>
		</div>
		<script type="text/x-template" id="cpn">
			<div>
				<h1>
					script type="text/x-template"
					在这个标签里写
				</h1>
			</div>
		</script>
		<template id="cpn2">
			<div>
				<h1>
					template
					在这个标签里写
				</h1>
			</div>
		</template>
		<script type="text/javascript">
			//1.全局
			Vue.component('cpn1',{
				template:"#cpn"
			})
			const app=new Vue({
				el:"#app",				
				components:{
					//局部
					'cpn2':{
						template:"#cpn2"
					}
				}
			})
		</script>
	</body>
	```
### 父子组件通信
* vue组件应该有自己保存数据的地方、
* 组件无法访问vue实例，假设即使可以访问，但是数据过多会臃肿
* 组件也可以传值，在component里传一个data，但不能是对象类型,要return,是一个函数，而且这个和vue很像

组件之间的属性与方法调用

	<div id="app">
		<cpn1></cpn1>
		<cpn2></cpn2>
	</div>
	<script type="text/x-template" id="cpn">
		<div>
			<h1>
				script type="text/x-template"
				在这个标签里写
				{{msg1}}
				计数器：{{counter}}
				<button @click="counter++">+</button>
				<!-- <button @click="add()">+</button> -->
				<button @click="counter--">-</button>
			</h1>
		</div>
	</script>
	<template id="cpn2">
		<div>
			<h1>
				template
				在这个标签里写
				{{msg2}}
			</h1>
		</div>
	</template>
	<script type="text/javascript">
		//1.全局
		Vue.component('cpn1',{
			template:"#cpn",
			data(){
				//不能是类
				return{
					msg1:'abc',
					counter:0
				}
			},
			methods:{
				add(){
					this.counter++;
				}
			}
			
		})
		const app=new Vue({
			el:"#app",
			data:{
				msg:"hhhh"
			},
			components:{
				//局部
				'cpn2':{
					template:"#cpn2",
					data(){
						return{
							msg2:"abc2"
						}
					}
				}
			}
		})
	</script>


父子组件传值
* 子组件注册时，定义props用来接收数据
* 子组件模板定义时，调用数据
* 父组件引用子组件，给他绑定参数，:
* props:可以传数组，也可以类


**父传子**

	<div id="app">
		<cpn1 :cmovies="movies" :cmsg="msg"></cpn1>
	</div>
	<script type="text/x-template" id="cpn">
		<div>
			<h1 v-for="c in cmovies">
				{{c}}
			</h1>
			<h1>{{cmsg}}</h1>
		</div>
	</script>
	<script type="text/javascript">
		//父传子 props
		const cpn={
			template:"#cpn",
			props:['cmovies','cmsg'],
			data(){
				return {}
			}
		};
		//root组件
		const app=new Vue({
			el:"#app",
			data:{   
				movies:['o1','zio','build'],
				msg:"hello"
			},
			components:{
				//局部
				'cpn1':cpn
			}
		})
	</script>

类传值
``` 注意驼峰标识，如果定义时，为大写，使用时要改成—

子传父

		<div id="app">
			<cpn1 @itemclick='cpnClick'></cpn1>
		</div>
		<script type="text/x-template" id="cpn">
			<div>
				<button v-for="(item,index) in categories" @click="btnClick(item)">
				{{item.name}}
				</button>
				{{cl}}
			</div>
		</script>
		<script type="text/javascript">
			//子传父
			const cpn={
				template:"#cpn",
				data(){
					return {
						categories:[
							{id:'aaa',name:'热门推荐'},
							{id:'bbb',name:'手机数码'},
							{id:'ccc',name:'服装衣服'},
							{id:'ddd',name:'电脑办公'}
						],
						cl:''
					}
				},
				methods:{
					btnClick(item){
						//子组件发射事件,事件名字，参数
						this.$emit('itemclick',item);
						this.cl=item.name;
					}
				}
			};
			//root组件
			const app=new Vue({
				el:"#app",
				data:{
				},
				methods:{
					cpnClick(item){
						console.log(item);
						
					}
				},
				components:{
					//局部
					'cpn1':cpn
				}
			})
		</script>

父子组件通信
watch
children-refs
父访问子
parent-root
子访问父

组件插槽solt

使用方法:<slot></slot>此时调用子组件时，在组件标签里往下添加标签即可<cpn1 @itemclick='cpnClick'><button></button></cpn1>
同时也可以给插槽默认值:<slot><button></button></slot>

具名插槽

如何修改具体插槽，给插槽设置name，不同的不会替换，没有Name会替换，同理要提替换，只需组件调用插槽名字即可

		//会显示按钮和左中右
		<div id="app">
			<cpn1 @itemclick='cpnClick'>
				
			</cpn1>
		</div>
		<script type="text/x-template" id="cpn">
			<div>
				<button v-for="(item,index) in categories" @click="btnClick(item)">
				{{item.name}}
				</button>
				{{cl}}
				<!-- <slot><button></button></slot> -->
				 <slot name="left">leftt</slot>
				 <slot name="mid">zhong</slot>
				 <slot name="right">you</slot>
			</div>
		</script>
		//显示标题太
		<div id="app">
			<cpn1 @itemclick='cpnClick'>
				标题太
			</cpn1>
		</div>
		<script type="text/x-template" id="cpn">
			<div>
				<button v-for="(item,index) in categories" @click="btnClick(item)">
				{{item.name}}
				</button>
				{{cl}}
				<!-- <slot><button></button></slot> -->
				 <slot >leftt</slot>
				 <slot>zhong</slot>
				 <slot >you</slot>
			</div>
		</script>
		//显示左中右
		<div id="app">
			<cpn1 @itemclick='cpnClick'>
				标题太
			</cpn1>
		</div>
		<script type="text/x-template" id="cpn">
			<div>
				<button v-for="(item,index) in categories" @click="btnClick(item)">
				{{item.name}}
				</button>
				{{cl}}
				<!-- <slot><button></button></slot> -->
				 <slot name="left">leftt</slot>
				 <slot name="mid">zhong</slot>
				 <slot name="right">you</slot>
			</div>
			
			//标题 zhong you，记住不能直接绑在组件标签里
			<div id="app">
				<cpn1 @itemclick='cpnClick'>
					<span slot="left">标题</span>
				</cpn1>
			</div>
			<script type="text/x-template" id="cpn">
				<div>
					<button v-for="(item,index) in categories" @click="btnClick(item)">
					{{item.name}}
					</button>
					{{cl}}
					<!-- <slot><button></button></slot> -->
					 <slot name="left">leftt</slot>
					 <slot name="mid">zhong</slot>
					 <slot name="right">you</slot>
				</div>
			</script>

编译作用域

作用域插槽，父组件替换插槽的标签，但是内容由子组件来提供

commonJS

let {} require()

嗷嗷待哺的簸箕板
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue2】组件
weixin_45707229的博客
09-03 961
Vue2中的组件化开发，以及最重要的父子组件间通信，通过props可以实现父传子；通过ref或自定义事件可实现子传父。
vue2的组件
weixin_73577920的博客
01-03 2411
1、组件的作用整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件2、组件分类按作用范围分类全局组件：项目中所有地方都可以的组件称为全局组件局部组件(私有组件)：仅有该组件才能使用的组件称为局部组件按照用途来分页面组件自定义组件3、局部组件使用局部组件的具体步骤。
Vue 2 组件创建全指南：一步一步学习
成长之路
04-30 541
本文介绍了如何在Vue 2中定义组件。首先，通过创建一个单文件组件（Single File Component），展示了如何将模板、脚本和样式组织在一个.vue文件中。然后，详细讨论了如何在模板中定义HTML结构，并利用Vue指令实现数据绑定和交互。在脚本部分，介绍了如何定义组件的数据和方法，并通过示例展示了如何更新数据。最后，通过样式部分展示了如何为组件添加样式，并强调了组件的响应式设计。通过本文的指导，读者可以全面了解在Vue 2中如何定义组件，并开始构建自己的Vue应用。
Vue2（组件开发）
passerby的博客
08-14 2638
请大家多多指教
Vue2组件
骆小洛
12-12 1161
一、组件的基本示例组件是可复用的Vue 实例，且带有一个名字：在以下例子中是。因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的配置选项，例如datacomputedwatchmethods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。我们可以在一个通过new Vue创建的 Vue 根实例中，把这个组件作为自定义元素来使用。二、组件的复用组件可以进行任意次数的复用。
Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细
wocwin的博客
03-24 4910
Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细
vue组件化.zip
04-17
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
vue组件化编程-todoList案例.zip
07-14
在“vue组件化编程-todoList案例.zip”中，我们可以深入学习如何使用Vue进行组件化开发，构建一个基本的待办事项（Todo List）应用。这个案例将涵盖以下关键知识点： 1. **Vue组件基础**： - 组件是Vue的核心特性...
Vue组件化通讯的实例代码
08-30
在本篇内容中，我们将深入探讨Vue组件化通信以及Vue组件的生命周期。 首先，Vue组件是Vue.js的核心概念，它们是可复用的代码块，有自己的视图和数据逻辑。一个Vue组件通常由`.vue`文件构成，该文件分为三个主要部分...
vue自定义开关组件.zip
03-12
Vue.js 是一个流行的前端JavaScript框架，它以组件化开发为核心，极大地提高了开发效率和代码复用性。在Vue中，自定义组件是构建用户界面的基本单元，允许开发者封装可重用的HTML元素，以实现更复杂的UI逻辑。"vue...
vue2(二)组件化
xuan971130的博客
04-21 970
一、组件化 1.1 简单认识组件化 1.2 全局组件与局部组件 全局组件:可以在多个Vue实例中使用。 局部组件：只能在单个Vue实例中使用。 在项目开发中，一般只设置一个vue实例，一般采用局部组件的方式。 <body> <div id="app"> <mycpn></mycpn> </div> <div id="app2"> <mycpn&.
Vue2学习之第一、二章——Vue核心与组件化编程
Adios_0403的博客
12-26 524
英文官网:中文官网:})注意：必须在new Vue实例之前定义全局过滤器自定义指令总结：定义语法：(1).局部指令：new Vue({directives:{指令名:配置对象}})或new Vue({directives{指令名:回调函数}})(2).全局指令：Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)配置对象中常用的3个回调：(1).bind：指令与元素成功绑定时调用。
Vue2实用组件集
m0_56376264的博客
11-21 180
Vue2实用组件集
VUE2---＞组件化
ClearloveYt的博客
07-28 482
在 main.js 入口文件中，通过 app.config.globalProperties 全局挂载 axios。这种可以直接下载并在项目中使用的现成组件，就叫做。通过 vue-cli 创建的项目在遇到接口跨域问题时，可以通过。element-ui 组件，或是根据需求，只。② vue 项目发现请求的接口不存在，把请求。devServer.proxy 属性的值，跨域资源共享，因此默认情况下，上面的接口。，我们可以只引入需要的组件，以达到。，比如 Button，那么需要在。vue-cli 提供了创建项目的。
Vue7：组件
menglong0329的博客
05-26 441
Vue.js 组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 注册一个全局组件语法格式如下： Vue.component(tagName, options) tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件： <tagName></tagName&g.
vue2学习笔记-组件化
wang_kai_7的博客
04-15 724
前言 跟着黄轶大神学习的 vue，做一些简单记录。 import Vue from 'vue' import App from './App.vue' var app = new Vue({ el: '#app', // 这里的 h 是 createElement 方法 render: h => h(App) }) 流程图 步骤 1 $mount 之前 这里的逻辑和数据驱动中的大致逻辑是一样的，都是在做初始化，到了下一步在会有所区别 2 $mount 位置：vue/src/core
【Vue2从入门到精通】认识Vue组件化，这篇文章就够了
全栈弄潮儿
03-18 500
当我们在构建Vue应用程序时，组件化是一个非常重要的概念。Vue组件化将应用程序划分为更小、更可重用的部分，从而使应用程序更易于维护、测试和扩展。
Vue2基础-Vue组件化编程
ning_xiao_xuan的博客
01-25 1084
Vue2基础-Vue组件化编程
Vue2组件化
weixin_50975172的博客
05-17 80
Vue2组件化
vue 组件化,模块化
最新发布
06-25
Vue.js 是一个流行的前端JavaScript框架，它的核心理念之一就是组件化和模块化开发。这两个概念在 Vue 中是相辅相成的： 1. **组件化**：Vue 提倡将界面拆分成可重用的、独立的组件。每个组件都有自己的模板、数据...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值