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(‘组件名’,组件)
三 使用组件(在调用处书写组件标签) 比如注册的组件名为 altman 使用时:
组件的嵌套
组件容器包裹嵌套
此时vm实例中只用注册包裹其他组件的app组件即可
VueComponent构造函数 1 比如上面定义的altman组件本质其实是一个名为VueComponent的构造函数 并且不是程序员定义的 是Vue.extend生成的 2 我们只需要些<altman/>(单闭合标签建议只在vue脚手架环境下写) 或<altman></altman> 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脚手架教程可以百度查询 此处已经安装好,直接用vue脚手架进行创建demo例子 创建好后可以先运行命令: npm run serve 查看demo是否成功 demo成功后可以直接将前面创建的文件进行复制替换创建的demo中的文件 复制替换完后输入启动命令:npm run serve 如果启动后有报如下错误的
可以在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. m y M e t h o d = f u n c t i o n ( ) . . . V u e . p r o t o t y p e . myMethod = function(){...} Vue.prototype. myMethod=function()...Vue.prototype.myProperty = xxx
scoped 作用:当多个组件内部的样式名称相同时,被同一个父级所引用时,防止样式名重复造成的冲突 写法: *<style scoped></style>*