Vue组件

components --> module --> views(pages)

一、组件概念❤️

1 - 组件是什么

• 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码；

2 - 组件化思想

• 把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护

3 - 封装组件的目的

• 复用
• 可维护

3 - 总结

• 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

二、组件的基本使用❤️

将功能抽象出来（涵盖结构 逻辑 样式）封装进一个单独的.vue文件

1 - 注册组件✅

1.1 - 全局注册

• 全局注册组件后, 就可以当做标签在任意Vue文件中template里用
• 单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用组件里封装的标签替换到这个位置

// main.js
Vue.component(名字, 组件);

// 引入 提示 组件 @代表src路径
import Hint from '@/components/Hint.vue'
// 注册全局组件
Vue.component('HintG', Hind);

1.2 - 局部注册

<template>
<div id="app">
<h1>
{{ titleInfo }}
</h1>
<!-- 使用组件 -->
<HintL />
<!-- 使用组件 -->
<hint-l />
</div>
</template>
<script>
// 引入组件
import Panel from './components/Hint.vue';
export default {
// 注册组件
components: {
HintL: Hint,
},
data () {
return {
titleInfo: 'Vue-组件',
};
},
};
</script>

2 - 使用组件

<!-- 使用组件 -->
<HintL />
<!-- 使用组件 -->
<hint-l />

最后

以上就是受伤枕头为你收集整理的Vue组件Vue组件一、组件概念❤️二、组件的基本使用❤️的全部内容，希望文章能够帮你解决Vue组件Vue组件一、组件概念❤️二、组件的基本使用❤️所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。