组件:
Vue根实例表示1个应用,一个应用有若干个组件拼装而成
使用组件
<组件名></组件名>
<组件名/> 需要模块化环境支持
<Header></Header>脚手架环境下webpack协助解决了,调用时依然不能小写header
定义组件
定义:
a) let 组件变量名= Vue.extend({
template:'<div class="header">我是header组件</div>'
});
b) let 组件变量名={}; √
注册(拼装)
a) Vue.component('组件名',组件变量名);
全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
b) 选项
components:{
组件名:组件变量名 √
}
组件数据
data 要是个函数,且要有返回值 object
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝,否则组件复用时,数据相互影响
组件模板:外部模板,字符模板(行间模板|inline-template)
外部模板:
组件内部: template: '#id名'
<script type="x-template" id='id名'
<template id='id名'... √
单文件组件(.vue)
script + template + style
注意:
组件名不可和html同名
组件没有el选项,只有根实例存在el
组件的模板一定要有根元素
组件的data是个函数
推荐:
组件变量名: 大驼峰 XxxXxx
组件名: xx-xx | 大驼峰(模块化环境)