什么？Vue3组件还不会？那还不赶紧进来学习，最全Vue3组件学习资料就在这里。

秃头老石

已于 2022-03-16 23:30:01 修改

阅读量1.1k

点赞数 3

分类专栏： Vue3 文章标签： es6 javascript 前端

于 2022-03-02 20:39:30 首次发布

本文链接：https://blog.csdn.net/sobject/article/details/123236243

版权

Vue3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

文章目录

前言
一、Vue.js 组件是什么？
二、Vue.js动画
- 1.动画
- - （1）动画模式
总结

前言

哈喽～今天给大家分享的是Vue3组件和动画。组件（Component）是 Vue.js 最强大的功能之一。接下来跟着我一起探寻组件和动画的奥秘吧

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue.js 组件是什么？

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件:一个小的功能分区
意义：复杂项目拆分简单的组件
让团队开发更高效
组件是可以重复使用的模块

也可以理解为：组件其实就是个小的Vue，具有data，methods，watch，computed

通常一个应用会以一棵嵌套的组件树的形式来组织

在这里插入图片描述
注册一个全局组件语法格式如下：

Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以直接使用标签的方式来调用组件

1.全局组件

注册一个简单的全局组件 btn，并使用它
代码如下（示例）：

//app.component 来创建组件：
const app = Vue.createApp({			 
})
// 创建根实例
app.component("btn",{
	template:`<button @click="n++">{{n}}</button>`,
	data(){return {n:1}}
})
app.mount("#app")

2.局部组件

注册一个简单的局部组件 step，并使用它

代码如下（示例）：

//定义组件
const step = {
	template:`<div><button @click="n--">-</button>{{n}}<button @click="n++">+</button></div>`,
	data(){return {n:1}}
}

//注册组件
const app = Vue.createApp({	
	components:{step}
})
//使用组件
<step></step>
<step></step>

3.组件的参数传递

（1）父传子props

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来

//传递
<step :num="10"></step>
<step :num="5"></step>
//接收
props:{
    "num":{type:Number,default:1}
},
//使用
data(){return {n:this.num}}
//对象与数组的默认值必须是函数的返回值
//语法结构 完整代码在下面

如何监听子组件发出的事件

通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop可以监视的值：

String
Number
Boolean
Array
Object
Date
Function
Symbol

（2）子传父emit事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

使用 $emit(eventName) 触发事件

我们用一个案例来具体分析一下组件的参数传递
案例展示

通过监听input里的值来控制p标签的长度和圆角

完整代码展示如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app div {
				width: 100px;
				background-color: #0000FF;

			}
		</style>
	</head>
	<body>
		<div id="app">
			<steper :value="w1" @numchange="w1=$event"></steper>
			<steper :value="w2" @numchange="w2=$event"></steper>
			
			
			
			<p :style="{width:w1+'px','height':w1+'px',borderRadius:w1+'px',border:'1px solid red'}"></p>
			<p :style="{width:w2+'px','height':w1+'px',borderRadius:w2+'px',border:'1px solid red'}"></p>
		</div>
		<script type="text/javascript">
			// 定于组件
			//组件父传子 props只读
			const steper = {
				template: `<p>
							<button @click="num--">-</button>
							<input v-model.number="num">
							<button @click="num++">+</button>
						</p>`,
				data() {
					return {
						num: this.value
					}
				},
				//属性
				props: {
					value: {
						type: Number, //value类型是数字
						default: 1 //默认值为1
					}
				},
				watch:{
					"num":{
						handler:function(nval,oval){
							this.$emit("numchange",this.num)
						},
						
						deep:true
					}
				}
			}

			Vue.createApp({
				//注册组件
				components: {
					steper
				},
				data() {
					return {
						w1:20,
						w2:10

					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

案例详解

在这里插入图片描述

4.插槽

和 HTML 元素一样，我们经常需要向一个组件传递内容
我们使用作为我们想要插入内容的占位符

（1）命名插槽

const price={
				template:`<span><slot name="pre"></slot>18<slot name="next"></slot></span>`
			}

//可以通过
			<price>
				<template v-slot:next>岁</template>
				<template v-slot:pre>我</template>
			</price>
//获取组件的嵌套内容

（2）插槽的作用域

有时让插槽内容能够访问子组件中才有的数据是很有用的。
当一个组件被用来渲染一个项目数组时，这是一个常见的情况，我们希望能够自定义每个项目的渲染方式。

<step>
    <template v-slot:default="scope">
        <i class="fas fa-check">{{scope.index}}</i>
        <span class="green">{{ scope.item }}</span>
    </template>	
</step>

const step = {
    template: `<ul><li v-for="( item, index ) in list">
	<slot :item="item" :index="index"></slot>
                   </li></ul>`,
data() {  return {list: ["vue", 'react', 'angular']}}}

二、Vue.js动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件
通过自动对显示或隐藏的元素添加类名

1.动画

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter
被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave
被删除)，在过渡/动画完成之后移除。

在这里插入图片描述
案例展示

和css3很相似

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			@keyframes fadeIn {
				from {
					opacity: 0;
					transform: rotate(360deg);
				}

				to {
					opacity: 1;
					transform: rotate(0)
				}
			}

			@keyframes fadeOut {
				from {
					opacity: 1;
					transform: rotate(0);
				}

				to {
					opacity: 0;
					transform: rotate(360deg)
				}
			}

			.fade-enter-active {
				animation: fadeIn ease 1s;
			}

			.fade-leave-active {
				/* 整个进入的状态
				整个离开的过程都拥有这两个类 */

				animation: fadeOut ease 1s;
			}

			img {
				width: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="flag=!flag">切换</button><br>
			<transition name="fade">
				<img src="./img/下载%20(27).png" v-if="flag">
			</transition>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						flag: true
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

（1）动画模式

n-out 先进在出，out-in先出在进

<transition  mode="out-in" enter-active-class="animated slideInLeft" leave-active-class="slideOutRight animated">
	<button key='a' v-if="flag">A</button>
	<button key='b' v-else>B</button>
</transition>

完整代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="./动画库/animate.css"/>
		<style type="text/css">
			body{
				padding: 50px;
			}
			p button{
				position: absolute;
				left: 0;
				right: 0;
				animation-duration:0.3s !important ;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button type="button" @click="flag=!flag">切换</button><br>
			<transition name="fade"    enter-active-class="animated slideInRight" leave-active-class="animated slideOutLeft">
				<button v-if="flag">in</button>
				<button v-else>out</button>
			</transition>
		</div>
		<script type="text/javascript">
			Vue.createApp({
				data() {
					return {
						flag: true
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

总结

以上就是今天要讲的内容，本文简单介绍了组件和动画的使用，而vue给我们带的惊喜还有很多，希望大家能多多关注老石。本系列将持续更新！！！

点赞，关注，收藏走一波，感激不尽！
你们的支持就是我的动力~
要想学好Vue ,关注老石不迷路

秃头老石

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
什么？Vue3组件还不会？那还不赶紧进来学习，最全Vue3组件学习资料就在这里。

文章目录前言一、Vue.js 组件是什么？1.全局组件2.局部组件3.组件的参数传递（1）父传子props（2）子传父emit事件4.插槽（1）命名插槽（2）插槽的作用域二、Vue.js动画1.动画（1）动画模式总结前言哈喽～今天给大家分享的是Vue3组件和动画。组件（Component）是 Vue.js 最强大的功能之一。接下来跟着我一起探寻组件和动画的奥秘吧提示：以下是本篇文章正文内容，下面案例可供参考一、Vue.js 组件是什么？组件（Component）是 Vue.js 最强大的功
复制链接

扫一扫