各组件之间的参数传递

Swingzzz

于 2020-10-28 18:17:16 发布

阅读量1.1k

点赞数 1

分类专栏： Vue学习文章标签： vue html

版权

14 篇文章

订阅专栏

本文详细介绍了Vue中各组件间的参数传递方式，包括父传子组件通过props定义接收参数，子传父组件利用事件发射机制，以及改进版的参数传递策略，帮助开发者更好地理解和掌握Vue组件通信技巧。

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

通过子组件的props部分，来指明可以接受的参数，父组件通过在标签中写明参数的键值对来传递参数。

props两种写法:

//第一种
props:['参数1','参数2']
//第二种
props:[
    '参数1':{
    	type:String,
    	required:true,
    	default:'XX'
    }
]

从下往上的事件发射

sub1.vue

doClick:function(){
    this.$emit('newName','xiaohu');
}

App.vue

<sub-app :myName="name" @newName="name=$event"></sub-app>

是以事件发射的方式来实现子传父的效果。

在子组件中，使用this.$emit(“键”,“值”)

在父组件中，子组件的标签中使用@键="msg= $e v e n t " 其中$ event就能得到值，msg是父组件中vue的属性

签中使用@键="msg= $e v e n t " 其中$ event就能得到值，msg是父组件中vue的属性