Bootstrap

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:"哈哈哈"
}
	}
}

 

;