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

最新推荐文章于 2024-08-29 10:13:04 发布

黑猫了个怪怪

最新推荐文章于 2024-08-29 10:13:04 发布

阅读量860

点赞数

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/Janicecat/article/details/121697574

版权

本文深入探讨了Vue.js中的组件化开发，包括如何定义、注册和使用组件，以及组件间的参数传递。通过实例展示了如何在components文件夹中组织组件，并在模板中引入和使用。此外，还介绍了组件的生命周期，从beforeCreate到destroyed的各个阶段，以及在特定生命周期钩子函数中的应用，如mounted用于初始化数据获取，beforeDestroy用于清理资源。

摘要由CSDN通过智能技术生成

1、组件

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

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

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

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

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",….]