组件是可复用的 Vue 实例,且带有一个名字。组件提高开发效率,实现敏捷性开发
VUE中的组件分为两种:全局组件/私有组件
全局组件:创建组件后直接在页面中调取使用即可
私有组件:需要在页面渲染的时候(new Vue)基于components注册一下才能使用
组件名 最安全的写法就是烤串(el-button)命名
全局组件
全局组件使用模板
Vue.component([name],[options]):
[name]是组件的名字:
命名规范遵循两种模式
kebab-case:base-info 调用 <base-info></base-info>
PasalCase:BaseInfo 调用 <baseinfo></baseinfo> 【页面在VUE中渲 染的时候,所有组件大写的名字都会变为小写】 <base-info></base-info>
[options]是组件的配置项:每一个组件都是一个单独vm实例,所以配置项中可以设置的 就是vm实例中配置的data/methods/computed...信息
代码如下:
<body>
<div id="app">
//在VUE视图中调用组件需要采用双闭合的方式,
因为单闭合的方式调用,会导致下面的代码不
再进行渲染
<base-info/>
//我们可以在双闭合标签内在编写一些其它的内容,
把这些内容作为组件的扩充内容(SLOT插槽
的概念)
<base-info>
<p>价格:¥198</p>
<button>立即购买</button>
</base-info>
//组件可以进行复用
<base-info></base-info>
<base-info></base-info>
<base-info></base-info>
<base-info></base-info>
</div>
<!-- 创建TEMPLATE模板 -->
<template id="baseInfoTemplate">
<div class="box">
<img :src="img" alt="">
<p v-html="content"></p>
</div>
</template>
<!-- IMPORT JS -->
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
Vue.component('base-info', {
template: '#baseInfoTemplate',
组件中的data为什么要写成函数形式?
data指定响应的数据(
1.为了保证每个组件中的DATA是独立的,我们需要让每个组件的DATA是一个闭包函数,
只有这样最后把N多组件放在一起渲染,相互之间的DATA才不会冲突的)
2.为了保证每个组件的数据的独立性:每一次使用组件时