Vue的组件化编程

非单文件组件

注册局部组件

在这里插入图片描述

在这里插入图片描述
此时上面书写的组件都是局部组件,每一个vue实例要想使用上面的组件时都需要在components中进行注册才可以使用,此时如果再创建一个Vue实例vms,这个实例不在components中注册就直接使用组件会产生什么变化:

此时控制台报错 ‘是否正确注册了组件？对于递归组件，请确保提供“name”选项’(翻译后)
此时我们注册一个全局组件,然后在vms中也不注册任何组件,然后调用者全局组件来试试看

在这里插入图片描述
此时再观察页面时发现全局组件被引用成功,vms实例中也没有注册如何组件

小总结
Vue中使用组件三大步骤
一定义组件(创建组件)
使用Vue.extend(options)创建其中options和new Vue(options)时传入的那个options几乎一样但也有区别
区别如下:
1 el不可以书写最终所有的组件都要经过一个Vue的实例管理,由Vue实例中的el决定服务于哪个容器
2 data必须写成函数形式避免组件被复用时数据之间存在引用关系
注意: 使用template配置组件结构主主体时,template下只能有一个根节点
二注册组件
1 局部注册: 直接在new Vue的实例中传入components选项中书写定义的组件名称或起别名
2 全局注册: Vue.component(‘组件名’,组件)

组件的嵌套

在这里插入图片描述
组件容器包裹嵌套

此时vm实例中只用注册包裹其他组件的app组件即可
在这里插入图片描述

VueComponent构造函数

 1 比如上面定义的altman组件本质其实是一个名为VueComponent的构造函数 并且不是程序员定义的 是Vue.extend生成的 2 我们只需要些 
  (单闭合标签建议只在vue脚手架环境下写) 或 
   Vue解析时会帮我们创建altman组件的实例对象 3 特别注意: 每次调用Vue.extend时返回的都是一个全新的VueComponent 4 关于this的指向 (1) 组件配置中: data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[VueComponent实例对象] (2) new Vue()配置中: data函数,methods中的函数 watch的函数 computed中的函数 它们的this均是[Vue实例对象] 5 VueComponent的实例对象 可以简称vc(此处简称只代表个人,组件实例对象) Vue的实例对象可以简称vm(此处简称只代表个人,根据vue的MVVM模型简称) 6 一个重要的内置关系: VueComponent.prototype.__proto__===Vue.prototype 有这个关系是为了让组件实例对象(vc) 可以访问到Vue原型上的属性 方法

单文件组件

在这里插入图片描述

此时书写好的组件和页面是不可以用浏览器直接打开的
在这里插入图片描述
控制台报错: 不能在模块外部使用 import 语句(翻译后)
后缀为.vue的文件必须在脚手架环境下运行才可以

Vue脚手架启动

可以在vue.config.js中添加lintOnSave: false 这行代码,然后重新输入启动命令npm run serve启动就可以了

在这里插入图片描述

ref属性
在获取页面上的dom元素已经自定义组件标签的实例时,vue提供了ref属性来进行获取,在dom元素上配置属性ref,然后vue实例中用$refs属性进行获取
1 被用来给元素或子组件注册引用信息(id的替代者)
2 应用在给html标签上获取的是真实dom元素应用在组件标签上是组件实例对象

在这里插入图片描述

props属性
功能: 让组件接收外部调用自己时传过来的数据
(1) 传递数据:
调用的地方:
(2) 接收数据
第一种方式(精简版,只接收不做任何限制,默认基本接的都是字符串类型)
props:[‘name’]
第二种方式(限制类型)
props:{

name:String,
age:Number
}
第三种方式(限制类型,限制接收数据的必要性,指定默认值)
props:{

name:{

type:String,//类型
required:true//必要性
default:‘赛罗’ //默认值
}
}
注意: props是只读的 vue底层会检测对props的修改,如果进行了修改,就会发出警告
可以在data中定义数据来存放props接收来的数据,然后修改data中的数据,此时的props就相当于中转站

在这里插入图片描述
mixins(混入)
功能: 可以把多个组件共用的配置或者方法提取成一个混入对象
使用方式:
(1) 定义混合
{

data(){…}
methods:{…}
…
}
(2) 使用混入
(1) 全局混入: Vue.mixin(xxx)
(2) 局部混入: mixins:[‘xxx’]

插件
功能: 用于增强Vue
本质: 包含install方法的一个对象 install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
定义插件:
对象.install = function (Vue,options){

// (1) 添加全局过滤器
Vue.filter(…)
// (2) 天剑全局指令
Vue.directive(…)
// (3) 配置全局混入(合)
Vue.mixin(…)
// (4) 添加实例方法
Vue.prototype. $myMethod = function(){…} Vue.prototype.$ myProperty = xxx