文章目录
使用组件三大步骤:
- 定义组件(创建组件)
- 注册组件(全局和局部)
- 使用组件(写组件标签)
定义组件
使用Vue.extend()
括号中内容与new Vue()
中内容几乎一致,只不过,没有el,而且data必须写成函数式(避免组件被复用时,数据存在引用关系)
const school = Vue.extend({
template: `
<div>
<h2>学校名称:{{schoolname}}</h2>
<h2>学校地址:{{address}}</h2>
button
</div>
`,
data() {
return {
schoolname: '尚硅谷',
address: '北京'
}
},
})
注册组件
局部注册:在new Vue
中的components
中使用
全局注册:使用Vue.component('组件名',组件)
//局部注册
new Vue({
el: '#root',
// 注册组件
components: {
xuexiao: school,
xuesheng: student
}
})
//全局注册
Vue.component('student',student)
全局都可用
使用组件
在相应位置写上组件标签即可
<div id="root">
<xuexiao></xuexiao>
<hr>
<xuesheng></xuesheng>
</div>
组件注意事项:
- 定义组件名时:一个单词直接使用,两个单词结合起来定义组件,中间需用-链接(
my-school
),如果不使用-,定义每个单词首字母大写时(MyShool
)需要使用脚手架 - 组件标签使用:第一种
<school></school>
,第二种<school/>
但是第二种必须使用脚手架,不使用会导致后续组件无法渲染 - 简写:
const school = Vue.extend(options)
可简写为const school = options
VueComponents
- 组件本质是一个名为
VueComponents
的构造函数,不是程序员定义的,而是Vue.extend
自己生成的 - 在调用组件时,Vue解析会帮我们创建组件的实例对象,即Vue帮我们执行
new VueComponents(options)
- 每次调用
Vue.extend
,返回的都是一个全新的VueComponents
- 组件配置中的函数(data, method,watch,computed)他们的this均指向组件实例对象(VueComponents)
一个重要的内置关系:
VueComponent.prototype._proto_ === Vue.prototype
,这个关系,使组件实例对象可以访问到Vue原型上的属性和方法
脚手架
脚手架文件结构分析:
不同版本的vue:
vue.js
和vue.runtime.xxx.js
区别:
1)vue.js
是完整版的vue,包括核心功能+模板解析器
2)vue.runtime.xxx.js
是运行版的vue,只包含核心功能,没有模板解析器- 因为
vue.runtime.xxx.js
没有模板解析器,不能使用template
配置项,需要使用render函数接收到的createElement
函数去指定具体内容
ref属性
- 用来给元素或者子组件注册引用信息(起名字,与id作用类似)
- 应用在html标签上获取的是真是DOM元素,应用在组件标签上获取的是组件实例对象
- 使用:
添加标识:<h1 ref="xxx"></h1>
或者<School ref="xxx"></School>
获取:this.$refs.xxx
配置项props
功能:让组件接收外部传进来的数据
传递数据:<Demo name="xxx">
接收数据:
- 只接收:
props:['name']
- 限制类型:
props:{
name:String//限制传入的name数据为字符串类型
}
- 限制类型,必要性,指定默认值
只有当没有传值时,才会使用默认值
props:{
name:{
type:String,//类型
required:true,//必要性
default:'老王'//默认值
}
}
mixin(混合)
功能:可以把多个组件公用的配置提取成一个混合对象
使用:
- 定义混合
export const xxx = {
data(){....},
methods:{...},
...
}
- 使用混合
全局混合:Vue.mixin(xxx)
局部混合:mixins:['xxx']
插件
功能:用于增强vue
本质:包含install
方法的一个对象,install
第一个参数是vue,第二个以后的参数是插件使用者传递的数据
定义插件:
对象.install = function (Vue, options) {
//添加全局过滤器
Vue.filter(...)
//添加全局指令
Vue.directive(...)
//配置全局混入(合)
Vye.mixin(...)
//添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myMethod = xxx
}
使用插件:Vue.use(插件名)
todolist案例总结:
- 组件化编码流程
1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突
2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:
①一个组件在用:放在组件自身即可
②一些组件在用,放在它们共同的父组件上(状态提升) - props适用于:
1)父组件 === > 子组件 通信
2)子组件 === >父组件 通信(要求父先给子一个函数) - 使用
v-model
要切记:v-model
绑定的值不能是props传过来的值,因为props不可以修改 - props传过来的若是对象类型的值,修改对象中的属性时,vue不会报错,但不推荐这样做
浏览器本地存储
分为两种:Window.localStorage
和 Window.sessionStorage
相关API:
xxxxxStorage.setItem('key', 'value')
把键值对添加到存储中,如果键名存在,则更新xxxxxStoragre.getItem('key')
,返回该键名对应的值xxxxxStorage.removeItem('key')
把该键名对应内容删除xxxxxStorage.clear()
清空所有数据
注意:
sessionStorage
存储的内容会随着浏览器窗口关闭而消失localStorage
存储的内容,需要手动清楚才会消失
组件自定义事件
- 一种组件间通信方式:子组件 === > 父组件
- 使用:A时父组件,B是子组件,B给A传输局,那么要在A中给B绑定自定义事件(事件回调在A中)
- 绑定自定义事件:
1)在父组件中<demo @atguigu="test"/>
或者<demo v-on:atguigu="test"/>
2)若只触发一次,可以使用once
修饰符,或者调用$once
方法
3)在父组件中:(回调函数要么写在methods中,要么写成箭头函数,否则this指向出问题)
<Student ref="student"/>
......
mounted() {
this.$refs.student.$on('atguigu',this.getStudentName)
},
- 触发自定义事件:
this.$emit('atguigu',数据)
- 解绑自定义事件:
this.$off('atguigu')
如果解绑多个,参数写成数组,将解绑事件名写在里面 - 组件在绑定原生DOM事件时,需要加上
.native
修饰符
全局事件总线
一种组件间的通信方式,适用于在任何组件间通信
安装全局事件总线:
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
}
})
使用全局事件总线
1)接收数据:A想接收数据,则在A组件中给`$bus`绑定自定义事件,时间的回调在A组件自身
methods(){
demo(data){...}
},
......
mounted() {
this.$bus.$on('xxx',this.demo)
}
2)提供数据:this.$bus.$emit('xxx', 数据)
最好在beforeDestroy
钩子中,用$off
去解绑当前组件所用事件
消息订阅与发布(pubsub)
1.一种组件间的通信方式,适用于任意组件间通信
2.使用步骤
- 安装pubsub:
npm i pubsub-js
- 引入:
import pubsub from 'pubsub-js'
- 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A自身
pubsub.sybscribe
methods(){
demo(data){......}
}
......
mounted(){
this.pid = pubsub.sybscribe('xxx',this,demo)//订阅消息
}
- 提供数据:
pubsub.publish('xxx',数据)
- 最好在
beforeDestroy
钩子中,用pubsub.unsubscribe(pid)
去取消订阅
$nextTcik
语法:this.$nextTick(回调)
作用:在下一次DOM更新结束后执行指定回调
什么时候用:当改变数据后,要基于更新后的新DOM进行操作时,要在nextTick
回调函数中执行
vue封装的过度与动画
作用:在插入,更新或者删除DOM元素时,在合适的时候给元素添加样式
图示
写法:
1.准备好样式:
- 元素进入的样式:
1.v-enter
:进入的起点
2.v-enter-active
:进入过程
3.v-enter-to
:进入的终点 - 元素离开的样式:
1.v-leave
:离开的起点
2.v-leave-active
:离开过程
3.v-leave-to
:离开的终点
2.使用<transition>
包裹要过度的元素,并配置name属性
<transition name="hello" appear>
<h1 v-show="isShow">你好啊</h1>
</transition>
3.有多个元素需要过度时,需要使用<transition-group>
,且每个元素都要配置key
值
vue脚手架配置代理
方法一:
在vue.config.js
中添加:
devServer: {
proxy:'http://localhost:5000'
}
说明:
- 优点:配置简单,请求资源时直接发给前端(8080)即可
- 缺点:不能配置多个代理,不能灵活地控制请求是否走代理
- 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么请求会直接发送给服务器(优先配置前端资源)
方法二:
在vue.config.js
中添加:
devServer: {
proxy: {
'/api1': {//匹配所有以api1开头的请求路径
target: 'http://localhost:5000',//代理目标的基础路径
pathRewrite: { '^/api1': '' },
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值,默认为true,true时,host为localhost:5000,false时为localhost:8080
},
'/api2': {
target: 'http://localhost:5001',
pathRewrite: { '^/api2': '' },
ws: true, //用于支持websocket
changeOrigin: true //用于控制请求头中的host值
},
},
}
说明:
- 优点:可以配置多个代理,并且可以灵活地控制请求是否走代理
- 缺点:配置略显繁琐,请求资源时必须加前缀
插槽
作用:让父组件可以向子组件指定位置上插入html结构,也是一种组件间通信方式,适用于父组件 === > 子组件
分类:默认插槽,具名插槽,作用域插槽
使用方式:
1.默认插槽:
父组件中:
<Category>
<div>html结构</div>
</Category>
子组件中:
<template>
<div>
//定义插槽
<slot>插槽默认位置</slot>
</template>
2.具名插槽:
父组件中:
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中:
<template>
<div>
//定义插槽
<slot name="center">插槽默认位置</slot>
<slot name="footer">插槽默认位置</slot>
</template>
3.作用域插槽
数据在组件的自身,但数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)
父组件中:(App)
<Category>
<template scope="scopeData">
//生成的是ul列表
<ul>
<li v-for="(g,index) in scopeData.games" :key="index">{{g}}</li>
</ul>
</template>
</Category>
<Category>
<template scope="scopeData">
//生成的是h4标题
< h4-for="(g,index) in scopeData.games" :key="index">{{g}}</h4>
</template>
</Category>
子组件中:(Catepory,数据所在)
<template>
<div>
//定义插槽
<slot :games="games">插槽默认位置</slot>
</template>