「这是我参与2022首次更文挑战的第9天，活动详情查看：2022首次更文挑战」。

组件的出现就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

组件化和模块化的不同：
模块化：是从代码逻辑的角度进行划分的方便。后台代码的分层开发，保证每个功能模块的职能单一。
          像后台的DAO层、Service层、Controller层、view层就负责不同的职能
组件化：是从UI界面的角度进行划分的。前端的组件化方便UI组件的重用

那我们就开始演示吧

父组件向子组件传值

组件文件一般都写在components文件夹下，方便调用。

我们现在绘制一个页面（父组件home.vue），需要用到顶栏容器的组件（子组件HomeHeader.vue），逻辑就是引用这个组件放home的合适位置，并将组件需要的内容传递过去。

在父组件中引用子组件代码：

import HomeHeader from '../components/common/HomeHeader.vue';

在父组件合适位置添加HomeHeader元素 <HomeHeader></HomeHeader>和<home-header></home-header>都可以，添加好后可以自动在export default中的components添加，没有自动生成的话，就手动补全

export default {
  components: { HomeHeader },
  data() {
    return {
        content: "新年快乐！"
    }
  }
}

content就是我们需要传递到子组件显示的内容，其中第一个content表示子组件接收时的参数名，第二个content表示我们传递的是我们data中的content

<template>
    <el-container>
    <el-header>
      <home-header :content="content"></home-header>
    </el-header>
    <el-main>Main</el-main>
  </el-container>
</template>

HomeHeader子组件这边使用props进行接收，并显示在页面{{content}}

export default {
    props:{
        content: String
    },
    data(){
        return{
            msg: "虎力全开，大吉大利"
        }
    }
}

子组件向父组件传值

在子组件的方法中使用this.$emit（父组件接收的参数，传递的内容），这边将子组件中的msg（ "虎力全开，大吉大利"）传递过去，写一个按钮触发keyDown方法即可<button @click='keyDown()'>按钮</button>

keyDown(){
    this.$emit("getMsg", this.msg);
}

父组件中添加触发方法@getMsg='getData'， getMsg是接收的参数，名字根据子组件的参数而改变， getData的传递过来后触发的方法

 <home-header :content="content" @getMsg='getData'></home-header>

getData(data){
    alert(data)
}

点击按钮后就会弹出子组件传递过来的字符串了

vue组件的使用

父组件向子组件传值

子组件向父组件传值