Vue - 组件之间的通信

最新推荐文章于 2024-08-16 19:41:03 发布

VantageCesar

最新推荐文章于 2024-08-16 19:41:03 发布

阅读量131

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiomarazark/article/details/124807342

版权

本文详细介绍了Vue中父子组件间通信的五种方式：1) 父组件通过props向子组件传递数据；2) 子组件通过$emit触发自定义事件与父组件通信；3) 利用事件总线实现任意组件间通信；4) 使用插槽进行内容分发；5) 结合Vuex管理状态。每种方式都提供了具体的代码示例。

摘要由CSDN通过智能技术生成

父子组件之间的通信

<template>
	<Child name="希泽" :age="18"/>
</template>
<script>
export default {
     
  name: "Parent",
};
</script>

<template>
	{
  {name}}--{
  {age}}
</template>
<script>
export default {
     
  name: "Child",
  props:['name','age']
};
</script>

第一步：在父组件中所需要传递参数的位置使用v-model绑定数据。

第二步：在子组件中使用props接收参数

注意：props接收参数的方式总共有三种

props:['name','age']

props:{
   
   name:String,
   age:Number
}

props:{
   
   name:{
   
   	type:String,

关注

专栏目录