Vue组件的非单文件组件 | 备赛摸鱼学习

本部分是Vue_组件_非单文件组件

---

基础内容

解释：组件是实现应用中局部功能代码和资源的集合

需求：尽可能拆分的细致以做到代码的高复用率

• 非单文件组件：
  一个文件中包含N个组件
• 单文件组件：
  一个文件中包含一个组件（开发项目中经常用）

使用方法

一般情况下组件使用的三步走：

1. 创建组件
2. 注册组件
3. 使用组件

基础代码

非单文件组件

//创建组件 此处是非单文件组件(定义组件)
const 中转的变量名 = Vue.extend({
  //方法体，可以按照vue实例的
  name:'名字',//这里的名字是在开发者工具提示的对标签没有影响
  template:``//这里是结构体用的反引号
  })
//注册组件(全局注册)
Vue.component('组件名',中转的变量名)
new Vue({
        el:'#root',
        //注册组件(局部注册)
        components:{
            组件名:中转的变量名
        }
    })

//使用时在 root 中直接 使用
<组件名></组件名>

注意事项

组件名

由多个词组成：单词与单词之间使用 - （英文横杠）分割，但是这样就在js编写中需要使用引号去包围起来
Ps.使用脚手架的时候可以使用首字母大写去区分单词
备注：

1. 组件名尽可能去回避Html中已经有了元素名，例如bod,header等等都不行
2. 可以使用name配置项去制定组件在开发者工具总呈现的名字

关于组件标签

第一种写法<组件名></组件名>
第二种写法<组件名/>
但是:不使用脚手架的时候<组件名/> 会导致后续组件无法渲染

简写方式

const school =Vue.extend(options)

可以简写为：

const school =options

在最后的时候符合格式的时候，源码会自己去判断是不是一个组件

组件的嵌套

实在不行叫他俄罗斯套娃好了
嵌套可以草草的理解为一个组件里面套着多个组件

 //创建组件 此处是非单文件组件(定义组件)
const 子组件 = Vue.extend({
  name:'子组件',
  template:``
  })
//创建组件 此处是非单文件组件(定义组件)
const 父组件 = Vue.extend({
  name:'父组件',
  template:`
  <div>
    <子组件></子组件>
  </div> 
  `,
  components:{
      子组件
    }
  })

先准备好子组件再去注册子组件，要不然会报错找不到子组件

VueComponent构造函数

1. 组件的本质是一个名为VueComponent的构造函数，并非个人定义，是Vue.extend生成的
2. 当我们写组件的标签时，vue会自动去创建对应组件的实例对象
3. 特别的：每次去调用Vue.extend的返回都是一个全新的VueComponent
4. 关于this的指向问题:
   在组件配置中：data函数、methods中函数、watch中函数、computed中的函数 它们的this均是VueComponent实例对象
   在new Vue(options)配置中： data函数、methods中函数、watch中函数、computed中的函数 它们的this均是Vue实例对象即vm
5. VC（组件实例对象）有的功能VM都有，但是VC没有EL

有很多东西需要去复习 JavaScript 要不然根本看不懂

学习总结

1. 编写组件时不把东西写死（不写el配置项，最终所有的组件都要被同一个vm管理，由vm决定组件服务于哪个容器）
2. 编写组件时Data需要使用函数式即 data(){} ——是为了避免组件被重复使用时数据存在引用关系
3. 组件名和中转变量名最好一致
4. 全局注册与局部注册相比局部注册用的更多
5. 使用 template 可以配置组件结构，但是需要在最外层存在一个div
6. 一般情况下app组件会去管理所有的组件（标准化开发会存在的东西）