class 9: vue.js 3 组件化基础（2）父子组件间通信

父子组件之间的相互通信

• 开发过程中，我们通常会将一个页面拆分成多个组件，然后将这些组件通过组合或者嵌套的方式构建页面。组件的嵌套由父组件和子组件组成，它们之间的通信如下图所示
  
• 父组件传递数据给子组件是通过props属性实现的；而子组件传递数据给父组件，是通过触发事件$emit实现的

父组件传递数据给子组件

Prop为字符串类型的数组

• Props是在组件上注册自定义属性的一种方式。当父组件为自定义属性赋值后，子组件可以通过属性名获取对应的值。Props一般可用来传递字符串类型的数组或者对象类型

<!--ShowMessage.vue-->
<script>
export default {
     
     
  props: ['title', 'content']
}
</script>

<template>
  <div class="show-message">
    <h4>{
  
  {title}}</h4>
    <div>{
  
  {content}}</div>
  </div>
</template>

<style scoped>

</style>

<!--App.vue-->
<template>
  <div class="app">
<!--    1. 直接传递字符串-->
    <ShowMessage title="我是标题" content="我是内容">
    </ShowMessage>
<!--    2. 绑定字符串类型的变量-->
    <ShowMessage :title="title" :content="content">
    </ShowMessage>
<!--    3. 绑定对象中字符串类型的属性-->
    <ShowMessage :title="message.title" :content="message.content">
    </ShowMessage>
<!--    4. 直接绑定一个对象，会自动将对象的每个属性拆出来逐一绑定-->
    <show-message v-bind="message">
    </show-message>
  </div>
</template>