vue组件

最新推荐文章于 2024-01-01 14:24:36 发布

drunk喵咪

最新推荐文章于 2024-01-01 14:24:36 发布

阅读量172

点赞数

分类专栏： Vue 文章标签： vue组件

本文链接：https://blog.csdn.net/jdrunk/article/details/102627392

版权

Vue 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

1、组件定义
将组件的信息配置到一个对象中，这个对象与Vue的参数基本一致

let config = {
	template:`
	`,
	//data是函数，返回一个对象
	data(){			//保证每个vue实例都具有一个唯一的data对象
		return {
		}
	},
	props:["title"]	,	//期望从调用者哪里获取到的属性名称
	methods:{
	}
}

2、组件的注册
（1）全局注册：所有的vue实例都可以调用注册组件

Vue.component(组件名称,config)   //config组件定义
组件名称一般为 x-x / xX
	licy-alert	/ 	licyAlert

（2）局部注册：只有当前vue实例才能调用注册的组件

new Vue({
	el:"#app",
	components:{
		组件名称:config
	}
})

（3）组件的调用

<licy-alert></licy-alert>

（4）父组件向子组件传值（属性作为参数进行传递）
props:[“title”,“type”]

	参数类型校验
	props:{
		a:Number,
		b:{		// 期望b的类型为字符串，并且这个参数是必须的
			type:String,
			required:true	//参数校验
		},
		c:{		// 期望c的类型为boolean，如果这个参数用户没有传递，默认值为true  
			type:Boolean,
			default:true   //参数默认值
		},
		d:Function
	}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>传值</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<my-test 
			a="hello world"   //静态传值
			:b="true"   //动态传值
			:c="12.3" 
			:d="{a:'terry'}"
			:e="()=>{alert(1)}"></my-test>
	</div>
	<script>
		let myTest = {
			template:`
				<div>
					<p>a:{{typeof a}} , {{a}}</p>
					<p>b:{{typeof b}} , {{b}}</p>
					<p>c:{{typeof c}} , {{c}}</p>
					<p>d:{{typeof d}} , {{d}}</p>
					<p>e:{{typeof e}} , {{e}}</p>
					<p>f:{{typeof f}} , {{f}}</p>
				</div>
			`,
			props:{
				a:String,
				b:Boolean,
				c:Number,
				d:Object,
				e:Function,
				f:{
					type:String,
					default:"default"
				}
			}
		}

		new Vue({
			el:"#app",
			components:{
				"my-test":myTest
			}
		})
	</script>
	
</body>
</html>

静态传参值为字符串
如果想要传递非字符串类型的值，那么必须使用动态传参
在这里插入图片描述

单向数据流（父->子）
父组件中data值的改变会影响到子组件中的相应数据的改变，但是子组件无法改变父组件的值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单向数据流</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<p>{{title}}</p>
		<my-info :title="title"></my-info>
	</div>
	<script>
		// config
		let myInfo = {
			template:`
				<h2>{{title}}</h2>
			`,
			props:{
				title:String
			},
			created(){
				setTimeout(()=>{
					this.title += "你好，组件"
				},5000)
			}
		}
		// 注册
		Vue.component("my-info",myInfo)

		new Vue({
			el:"#app",
			data:{
				title:"保存成功"
			},
			created(){
				setTimeout(()=>{
					this.title += "hello world"
				},3000)
			}
		})
	</script>
</body>
</html>

（5）事件传递（子->父)
当用户操作子组件的时候，希望父组件的值得到改变

	父组件
		<my-test @foo="handler"></my-test>
	子组件
		{
			template:`
				<button @click="change">按钮</button>
			`,
			methods:{
				change(){
					this.$emit("foo")
				}
			}
		}

流程：点击按钮-> change() ->this.$emit(“foo”) ->handler()

（6）插槽（模板作为参数传递）
1）匿名插槽

<my-test>
	<div>hello world</div>
</my-test>

let my-test = {
	template:`
		<div>
			<h2>{{title}}</h2>
			<div class="content">
				<!--slot用于接受组件调用时传递的子内容-->
				<slot></slot>
			</div>
		</div>
	`
}

2）具名插槽

<my-test>
	<template v-slot:a>
		<div>hello world</div>
	</template>
	<template v-slot:b>
		<div>address...</div>
	</template>
</my-test>

<!--vue1.0-->
<my-test>
		<div slot="a">hello world</div>
		<div slot="b">address...</div>
</my-test>

let my-test = {
	template:`
		<div>
			<h2>{{title}}</h2>
			<div class="content">
				<slot name="a"></slot>
			</div>
			<div class="footer">
				<slot name="b"></slot>
			</div>
		</div>
	`
}

3）回调插槽（作用域插槽）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作用域插槽</title>
	<!-- 导入vue -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<!-- elementui 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- elementui 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
	<div id="app">
		<my-list :data="customers">
			<template v-slot:a="slot">
				<div>
					<span>{{slot.row.name}}</span>
					<span>{{slot.row.id}}</span>
					<span>{{slot.row.gender}}</span>
				</div>
			</template>
		</my-list>
		<my-list :data="products">
			<template v-slot:a="slot">
				<div>
					<strong>{{slot.row.id}}</strong>
					<em>{{slot.row.name}}</em>
					<a href="">{{slot.row.price}}</a>
				</div>
			</template>
		</my-list>
		<el-button type="primary">按钮</el-button>
		<el-table :data="customers">
			<el-table-column label="编号" prop="id"></el-table-column>
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="性别" prop="gender"></el-table-column>
			<el-table-column label="操作">
				<template v-slot:default="scope">
					<a href="" @click.prevent="deleteHandler(scope.row.id)">删除</a>
					<a href="" @click.prevent="editHandler(scope.row)">修改</a>
				</template>
			</el-table-column>
		</el-table>		
	</div>
	<script>
		let myList = {
			template:`
				<div class="list">
					<ul>
						<li v-for="item in data">
							<slot name="a" :row="item"></slot>
						</li>
					</ul>
				</div>
			`,
			props:{
				data:{
					type:Array,
					default:[]
				}
			}
		} 
		Vue.component("my-list",myList)
		new Vue({
			el:"#app",
			data:{
				customers:[
					{id:1,name:"terry",gender:"male"},
					{id:2,name:"larry",gender:"male"},
					{id:3,name:"tom",gender:"male"}
				],
				products:[
					{id:1,name:"可口可乐",price:"2.5"},
					{id:2,name:"北京方便面",price:"1"},
					{id:3,name:"怡宝",price:"1"}
				]
			}
		})
	</script>
</body>
</html>