定义组件时： let home = Vue.extend(配置项)
配置项和new VUe 基本类似 可以有 data computed template 。。。。。。
和 new Vue() 区别：
1. el 不要写
2. data 要写成一个函数 形式 因为每次使用组件都是返回独立的数据
3. 用 template 配置模板 注意只能有一个根元素
注册:
1. 局部注册
在 new Vue() 中添加 配置项 components:{ haha:home } 一般键和值是一样的
2. 全局注册
Vue.component("home",home) 在多个容器中都可以使用
使用 :在 root 中
<haha></haha>
关于组件名称:
1. 一个单词 home 或者 Home 模板中用 <Home></Home>
1.1 开发者工具显示的会将 开头字母大写 所以建议大家用 Home
1.2 在脚手架中一般写 <Home/> 但是只解析第一个 脚手架中正常
2. 多个单词 myschool 使用连字符或大驼峰 在调试工具都是显示 大驼峰
2.1 MyShool 在脚手架中可以使用
2.2 my-shool 可以使用连字符 注意双引号
组件定义的简写形式 了解一下
1. 省略 Vue.extend 直接 写 {} 配置项 局部和全局定义都可以省略
底层使用的还是 Vue.extend api
2. 使用script 标签 让模板提示
2.1 全局
Vue.component("组件名",{
template:"#id名" // 使用的模板是script标签中的内容
})
2.2 局部
let 组件名 = {
template:"#id名"// 使用的模板是script标签中的内容
}
在new Vue() 中 注册一下即可
3. 在new Vue() 直接写
test:{
template:"<h1>test{{msg}}</h1>",
data(){
return {
msg:"提示一下"
}
}
}
注意: 组件有一个name 属性配置项 可以指定 组件的名称 在调试工具中
显示 name 指定的名称
组件嵌套： 也是三步
1. 定义一个组件
2. 注册 在 School组件中 注册
3. 使用 在 School组件的模板中使用
一些注意点:
组件中的this 指向 VueComponent 对象实例 简称vc
new Vue 中this 指向 vm实例
内置关系： 所有的vc 是VueComponent 构造函数 创建出来的
vc 可以使用vue 原型上的 属性和方法 比如 生命周期函数 计算属性。。。。
非单文件组件的一些缺陷：
- 全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板(String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
- 不支持 CSS(No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤(No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel */
