[JavaScript知识库]【Vue】非单文件组件

使用组件的三大步骤：

1. 定义组件（创建组件）
2. 注册组件
3. 使用组件（写组件标签）

定义一个组件

使用Vue.extend(options)创建，其中options和new Vue（options）时传入的options几乎一样，但也有区别：
1.el不要写 -最终所有的组件都要经过一个VM的管理，由VM中的el决定服务哪个容器
2.data必须写成函数 -避免组件被复用时，数据存在引用关系。

注册组件

1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component(‘组件名’,组件)

编写组件标签

<school></school>

几个注意点

1.组件名写法
一个单词组成：首字母可以大写也可以小写
多个单词组成：单词中间用-：my-school
每个单词首字母大写:MySchool（需要Vue脚手架支持）
2.关于组件标签：

//第一种
<school></school>
//第二种  （不使用脚手架时，这种会导致后续组件不能渲染）
<school/>

3.一个简写的方式： const school=Vue.extend(options)
简写为：const school =options

关于VueComponent

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或者<school></school>,Vue解析时会帮我们创建school组件的实例对象。即Vue帮我们执行的：new VueComponent(options).
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent。
4.关于this指向

• 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【VueComponent实例对象】
• new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】
  5.VueComponent的实例对象，以后简称VC（也可称之为：组件实例对象）
  Vue的实例对象叫VM