vue3课程笔记-组件化开发

父子组件间的通信

• 父组件 => 子组件 ：通过props属性
• 子组件 => 父组件： 通过$emit触发事件

父传子

我们可以通过props来完成组件之间的通信

props是什么？

• props是你可以在组件上注册一些自定义的attribute
• 父组件可以给这些attribute赋值，子组件通过attribute的名称获取到对应的值

props有两种常见的用法：

• 方式一：字符串数组，数组中的字符串就是attribute的名称
• 方拾二：对象类型；对象类型我们可以在指定props名称的同时，指定它需要传递的类型，是否是必须的，默认值

props的数组用法

//子组件-showMessage
<template>
	<div>组件展示的title:{{title}}</div>
	<div>组件展示的content:{{content}}</div>
</template>
<script>
  export default {
  	props:["title", "content"]
  }
</script>
// 父组件
<template>
	<div>
    <show-message title="heihei" content="this is a boring boy">
    </show-message>
  </div>
</template>

props的对象用法

数组用法只能传入attribute的名称，并不能对形式做限制和传入默认值

• 指定传入的attribute的类型
• 指定传入的attribute是否是必传的
• 指定没有传入时，attribute的默认值

export default {
	props:{
		//指定类型
	title: String,
//指定类型 同时指定是否必选，默认值
content: {
	type: String,
	require: true,
	default:"哈哈哈"
}
	}
}