vue基础 - 07 （组件化components、组件传参、组件的生命周期）

1、组件

        组件化：一个页面由不同的部分组合而成，团队协作时，会把网页拆分成不同的模块，然后分别书写，最终合并到一起

        components文件夹就是专门放组件的，组件名称都是大写开头

        使用步骤：引入 -> 注册 -> 使用，名称要求大驼峰，避免与系统标签重名，在需要的文件中：

           引入：import Header from "./components/Header.vue";

           注册：components: {

                  Header,      //Header:Header，在当前html使用时的标签名 / import引入时的名字

          }，

           使用：<Header />

<template>
  <div>
    <!-- 可以复用 -->
    <Header />
    <Header />
    <Footer />
  </div>
</template>

<script>
import Header from "./components/Header1.vue";
import Footer from "./components/Footer.vue";

export default {
  components: {
    Header, 
    Footer,
  },
};
</script>

2、组件传参

        props：用来接收通过属性方式传入的值

        写法1：props: ["name",….]

        写法2：

        props: {

                 xxx: {

                          type: String,

                           default: "待定...", 

                  },

             },

3、组件的生命周期

        准备创建 ->  创建完毕 ->  准备挂载 ->  挂载完毕 ->  准备更新 ->  更新完毕 ->  准备销毁 ->  销毁完毕

        beforeCreate ->  created ->  beforeMount ->  mounted ->    

        beforeUpdate ->  updated ->  beforeDestroy ->  destroyed

        以上函数被称为钩子函数：在固定的时机自动触发的函数 – hook

        需求场景：

1. mounted，组件加载到页面后，立刻发送网络请求获取数据

     2. beforeDestroy，组件销毁，停止定时器