Vue 组件与动画

目录

1.组件components

组件的组织​

全局组件 

 监听子组件发出的事件

组件的插槽（嵌套）

具名插槽

2.动画transition

动画-使用关键帧动画

动画-引入第三方

动画模式 

3.模板引用

4.总结

组件components  

动画

模板引用  

---

1.组件components

组件的组织

全局组件 

app.component 来创建组件：

const app = Vue.createApp({			 
})
app.component("btn",{
	template:`<button @click="n++">{
  {n}}</button>`,
	data(){return {n:1}}
})
app.mount("#app")	 

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

组件的插槽（嵌套）

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

<step>      你好，我是嵌套内容 &