Vue的组件、动画

月凉笙

已于 2022-03-02 21:48:38 修改

阅读量678

点赞数

文章标签： vue.js 动画前端

于 2022-03-02 21:46:57 首次发布

本文链接：https://blog.csdn.net/qq_44769099/article/details/123240630

版权

组件

简介：

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

全局组件

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

   理解：组件其实就是小的Vue，具有data，methods watch computed
   组件的定义：
       const strper = {template:`<span>...</span>`}

   组件注册:
       componentd:{steper}

   组件的参数传递：
       父传子 props
           <strper :value="5">
           strper内部
               props:{type:nuber,default}
           steper内部使用 (只读，不修改)
               this.value
       子传父
           在steper内部
               this.$emit("numchange",this.num)
               numchange事件名称 this,num 事件值
           父组件
               <steper @numchange="w1=$event">
               $event就是子组件通过numchange传递过来的值this.num

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<steper :value="w1" @numchange="w1=$event"></steper><br>
			<steper :value="w2" @numchange="w2=$event"></steper><br>
			<p :style="{'width':w1+'px','height':w1+'px',borderRadius:w1+'px',border:'1px solid red'}"></p>
			<p :style="{'width':w2+'px','height':w2+'px',borderRadius:w2+'px',border:'1px solid green'}"></p>
		</div>
		<script>
		//定义组件
		//组件父传子 props(props是只读的)
			const steper={
				template:`<span>
				<button @click="num--">-</button>
				<input v-model.number="num" />
				<button @click="num++">+</button>
				</span>`,
				data(){
					return{num:this.value}
				},
				props:{
					value:{
						type:Number,	//value的类型是数字
						default:1		//默认值
					}
				},
				watch:{
					"num":{
						handler:function(nval,oval){
							this.$emit("numchange",this.num)
						},
						deep:true
					}
				}
			}
			Vue.createApp({
				components:{steper},
				data(){
					return{
						w1:30,
						w2:20
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>

局部组件

定义组件

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>

props传递参数

对象与数组的默认值必须是函数的返回值

传递

<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