做网站会提供源代码百度手机浏览器下载
前言
我们接着上一篇文章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>
最终效果
