vue组件化开发

最新推荐文章于 2024-05-02 08:06:07 发布

扶喵起来

最新推荐文章于 2024-05-02 08:06:07 发布

阅读量230

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/fu_miao_qi_lai/article/details/125658606

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.全局组件和局部组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 3.使用组件 -->
			<p>全局组件：</p>
			<mycmp></mycmp>
			<p>局部组件：</p>
			<mycmptwo></mycmptwo>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			// 1.创建组件构造器对象
			const cpnc = Vue.extend({
				template:`
					<div>
						<p>组件一</p>
					</div>`
			})
			// 2.1.注册组件(全局注册)
			Vue.component('mycmp',cpnc)
			var app = new Vue({
				el:'#app',
				data:{
				},
				components:{
					// 2.2.注册组件(局部注册)
					mycmptwo:cpnc
				}
			})
		</script>
	</body>
</html>

组件模板抽离写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="app">
			<mycmp></mycmp>
			<mycmp2></mycmp2>
		</div>
		<!-- 方法一 -->
		<template id="cmp">
			<div>
				<h1>方法一</h1>
				<p>啊哈哈哈哈</p>
			</div>
		</template>
		
		<!-- 方法二 -->
		<script type="text/x-template" id="cmp2">
			<div>
				<h1>方法二</h1>
				<p>啊哈哈哈哈</p>
			</div>
		</script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			// 2.1.注册组件(全局注册)
			Vue.component('mycmp',{
				template:'#cmp'
			})
			Vue.component('mycmp2',{
				template:'#cmp2'
			})
			var app = new Vue({
				el:'#app',
				data:{
				},
				components:{
				}
			})
		</script>
	</body>
</html>

2.父子组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 3.使用组件 -->
			<mycmp></mycmp>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			// 1.创建组件构造器对象
			const cpnc1 = Vue.extend({
				template:`
					<div>
						<p>组件二里的==>组件一</p>
					</div>`,
			})
			const cpnc2 = Vue.extend({
				template:`
					<div>
						<p>全局的==>组件二</p>
						<cpnc1></cpnc1>	
					</div>`,
				components:{
					cpnc1:cpnc1
				}
			})
			// 2.1.注册组件(全局注册)
			Vue.component('mycmp',cpnc2)
			var app = new Vue({
				el:'#app',
				data:{
				},
				components:{
				}
			})
		</script>
	</body>
</html>

3.组件中的data为什么是一个函数

data是函数的话，每次掉用组件实例对象的时候，返回一个新的对象，每个对象都指向不同的内存地址，所有组件复用的时候，不会共用一个数据，
data如果是对象的话，每个组件的数据都指向同一个内存地址，导致组件共用时，数据共用。

4.组件通信

通过props子--->父传递

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="app">
			<p>有数据</p>
			<cpn :my-children-info='peo'></cpn>
			<p>没数据，显示默认值</p>
			<cpn></cpn>
		</div>
		<!-- 方法一 -->
		<template id="elment">
			<div>
				<ul v-for="item in myChildrenInfo">
					<li>
						<h4>{{item.name}}</h4>
						<p>{{item.age}}</p>
					</li>
				</ul>
			</div>
		</template>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			const cpn = {
				template:'#elment',
				props:{
					myChildrenInfo:{
						type:Array,
						default(){
							return [{
									name:'默认1',
									age:1
								},{
									name:'默认2',
									age:2
								}
							]
						},
					}
				}
			}
			var app = new Vue({
				el:'#app',
				data:{
					peo:[{
						name:'张三',
						age:33
					},{
						name:'李四',
						age:22
					}]
				},
				components:{
					cpn
				}
			})
		</script>
	</body>
</html>

props详解

通过事件向父组件发送信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<div id="app">
			<p>父---> 子</p>
			<cpn :my-children-info='peo' @flyclick='cpnclick'></cpn>
			<p>点击获取 子--->父的值：{{cpnid}}</p>
		</div>
		<!-- 方法一 -->
		<template id="elment">
			<div>
				<button @click="btnclick(item)" type="button" v-for="item in myChildrenInfo">{{item.id}}{{item.name}}</button>
			</div>
		</template>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script type="text/javascript">
			const cpn = {
				template:'#elment',
				props:{
					myChildrenInfo:{
						type:Array,
						default(){
							return [{
									name:'默认1',
									id:1
								},{
									name:'默认2',
									id:2
								}
							]
						},
					}
				},
				methods:{
					btnclick:function(item){
						this.$emit('flyclick',item)
					}
				}
			}
			var app = new Vue({
				el:'#app',
				data:{
					peo:[{
						name:'家电',
						id:1
					},{
						name:'服饰',
						id:2
					}],
					cpnid:''
				},
				components:{
					cpn
				},
				methods:{
					cpnclick:function(item){
						this.cpnid = item.id + item.name
					}
				}
			})
		</script>
	</body>
</html>

5.双向绑定和组件通讯

xxxxxxxxxxxxxxxxx

6.父子组件的访问方式$children,$refs,$parent,$root

父--->子$children和$refs(常用)

子--->父$parent,$root

$parent访问上一级组件，$root访问根组件(vue)

6.slot插槽

7.作用于插槽

父组件替换插槽的标签，但内容由子组件提供。

编译作用域：父组件模板的所有东西都会在父级作用域内编译，子组件模板的所有东西都会在子集作用域内编译。

<div id="app">
	<cpn>
		<template slot-scope="slot">
			<p v-for="item in slot.mydata">{{item.name}}---------</p>
		</template>
	</cpn>  
</div>
<template id="elment">
	<div>
		<slot :mydata="myChildrenInfo">
			<ul>
				<li v-for="item in myChildrenInfo">{{item.name}}</li>
			</ul>
		</slot>
	</div>
</template>

扶喵起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件化开发

组件模板抽离写法2.父子组件3.组件中的data为什么是一个函数 data是函数的话，每次掉用组件实例对象的时候，返回一个新的对象，每个对象都指向不同的内存地址，所有组件复用的时候，不会共用一个数据， data如果是对象的话，每个组件的数据都指向同一个内存地址，导致组件共用时，数据共用。4.组件通信props详解5.双向绑定和组件通讯xxxxxxxxxxxxxxxxx $parent访问上一级组件，$root访问根组件(vue)父组件替换插
复制链接

扫一扫