vue3基础组件

Hu153155

已于 2022-03-02 21:59:00 修改

阅读量688

点赞数 1

文章标签： javascript 前端开发语言

于 2022-03-02 21:58:02 首次发布

本文链接：https://blog.youkuaiyun.com/Hu153155/article/details/123241044

版权

本文介绍了Vue3中的组件基础知识，包括如何创建全局和局部组件，详细讲解了组件的定义、注册和使用步骤。此外，还阐述了父传子组件通过props传递参数的方法，以及子组件如何通过emit事件向父组件传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、组件

1.创建全局组件

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

2.局部组件
使用组件分三步：
定义组件

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

注册组件

Vue.createApp({	
	components:{step}
})

使用组件

<step>内部放html内容</step>

3.父传子props传递参数
传递

<step :num="10"></step>
<step :num="5"></step>

接收

props:{
    "num":{type:Number,default:1}
},

使用

data(){return {n:this.num}}

4.子传父，emit事件
子组件里面，在step内部，this. $e m i t (" n u m c h a n g e ", t h i s . n u m) n u m c h a n g e 事件名称， t h i s . n u m 事件值。父组件里面， < s t e p e r @ n u m c h a n g e = " w 1 =$ event">
$event 就是子组件通过numchange传递过来的值 this.num