父子组件间的通信
- 父组件 => 子组件 :通过
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:"哈哈哈"
}
}
}