前言

我们接着上一篇文章02-Vue实例的生命周期函数 来讲。


下一篇文章 03-02-Vue组件之间的传值

什么是组件

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

模块化和组件化的区别

• 模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

• 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

全局组件的定义和注册

组件Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

一、创建组件

在src/components下创建vue组件MyComponent

文件内容

<template>
    <div>
    </div>
</template>

<script>
export default {
};
</script>

<style>
</style>

二、定义组件内容

<template>
    <div>
        这是组件中的内容
    </div>
</template>

三、在父组件中引入组件

父组件：

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  
};
</script>

四、在父组件中声明组件

<script>
import MyComponent from './components/MyComponent.vue';
export default {
  components:{
    MyComponent
  }
};
</script>

五、在父组件中使用组件

<template>
  <div>
    <MyComponent></MyComponent>
  </div>
</template>

最终效果