vue组件通信方式

欢迎学习vue组件通信方式

不管是vue2还是vue3,组件通信方式很重要,不管是项目还是面试都是经常用到的知识点。

一、props可以实现父子组件、子父组件、甚至兄弟组件

1. 父组件给子组件传递数据

 <!-- 父组件 -->
 <Child info="我是曹操" :money="money"></Child> 

子组件获取父组件传递数据
方式一：

//vue2写法
props:{
  info:{
      type:String,//接受的数据类型
      default:'默认数据'//接受默认数据
  },
  money:{
      type:Number,
      default:0
  }
}
//vue3写法
let props = defineProps({
  info:{
   type:String,//接受的数据类型
   default:'默认参数',//接受默认数据
  },
  money:{
   type:Number,
   default:0
}})

方式二：

//vue2写法
props=['info','money']
props: {
  info: String,
  money: Number
}
//vue3写法
let props = defineProps(['info','money']);//数组写法
let props = defineProps({
  info: String,
  money: Number
}); //对象写法

注意：子组件获取到props数据就可以在模板中使用了,但是切记props是只读的(只能读取，不能修改)

2.子组件给父组件传递数据

 <!-- 父组件 -->
 <Child @get-message="getMessage"></Child> 

父组件的回调

const getMessage = (msg) => {
	console.log(msg)
}

子组件

//defineEmits方法不需要引入直接使用
let emit = defineEmits(['get-message']);
const handler = () => {
  //第一个参数:事件类型 第二个|三个|N参数即为注入数据
    emit('get-message','东风导弹','航母');
};