vue基础知识补充（1）

配置项:props

功能:让组件接收外部传来的数据

1）传递数据：

<Demo name="xxx">

2）接收数据：

第一种方式：（只接收）

props:['name']

第二种方式：（限制类型)

props:{

name:Number

}

第三种方式：（限制类型、限制必要性、指定默认值):

props:{

name:{

type:String, //类型

required:true, //必要性

default:'老王' //默认值

}

}

备注:props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

mixin(混入)

功能:可以把多个组件公用的配置提取成一个混入对象

使用方式：

第一步定义混合：例如：

{

data(){.....},

methods:{.....},

.....

}

第二步使用混合：例如：

1）全局混入：Vue.mixin(xxx)

2)局部混入：mixins:['xxx']

scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

webstorage

浏览器端通过Window.sessionStorage 和Window.localStorage 属性来实现本地存储

相关API：

1. xxxxStorage.setItem('key','value') //存到本地存储，如果键名存在，则会替换

2. xxxxStorage.getItem('person') //返回键名对应的值

3. xxxxStorage.removeItem('key') //把该键名从存储中删除

4. xxxxStorage.clear() //清空存储中的所有数据

备注:sessionStorage 会随着浏览器关闭而消失

localStorage需要手动删除才会消失

组件的自定义事件：

1.组件间的一种通信方式，适用于：子组件===>父组件

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3绑定自定义事件：

1）第一种方式，在父组件中：<子组件实例 @事件名=“函数”>或<子组件实例 v-on：事件名=“函数”>

例：<Demo @heima="test">

2）第二种方式，在父组件中：

<Demo ref="demo">

........

mounted(){

this.$refs.xxx.$on('heima',this.test)

}

在子组件中触发事件：

子组件中的方法触发事件：

methods:{

方法名(){

this.$emit('heima',data);

}

}

@自定义事件，在 传数据的组件的方法中 需要 this.$emit('xxxx(事件名)',数据)触发事件，在 接收数据的组件中 methods中只写对应的方法

例如 <Student ref="student">，在 传数据的组件的方法中 需要 this.$emit('xxxx',数据)触发事件，在接收数据的组件中 需要在mounted中 this.$on('xxxx(事件名)',callback)

全局事件总线：

1.适用于任意组件间的通信

2.安装全局事件总线：

在main.js中

new Vue({

el:' ',

......

beforeCreate(){

Vue.prototype.$bus = this //$bus就是当前应用的vm

}

})

3.使用事件总线

1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){

demo(data){

......

}

},

mounted(){

this.$bus.$on('xxxx',this.demo)

}

2）提供数据：

this.$emit('xxxxx',数据)

4.最好在beforeDestory钩子中，用$off去解绑当前组件用到的事件

消息订阅与发布:

1.组件间的通信方式，适用于 任意组件间通信

2.使用步骤:

1）按照pubsub： npm i pubsub-js

2)引入：import pubsub from ‘pubsub-js'

3)接收数据：A组件想接收数据，则在A组件中订阅信息，订阅的回调留在A组件自身

methods(){

demo(data){

}

},

mounted(){

this.pid=pubsub.subscribe('xxx',this.demo) //订阅消息

}

4)提供数据:

pubsub.publish('xxx',数据)

5）最好在beforeDestory钩子中，用pubsub.unsubscribe(pid)

去<span style="color:red"取消订阅</span>

nextTick()

1.语法：this.$nextTick(回调函数)

2.作用:在下一次DOM更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作后，要在nextTick所指定的回调函数中执行

Vue封装的过度与动画

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名

2.写法：

1）准备好样式；

元素进入的样式：

1.1）v-enter：进入的起点

1.2）v-enter-active：进入过程中

1.3）v-enter-to：进入的终点

元素离开的样式：

1.4）v-leave：离开的起点

1.5）v-leave-active：离开过程中

1.6）v-leave-to：离开的终点

2）用<transition></transition>包裹要过度的元素，并配置name属性：

<transition name="hello">

<h1 v-show="isShow">你好啊</h1>

</transition

3）注意：若有多个元素需要过度，则需要使用：<transition-group>,且每个元素都要指定key值

插槽：

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式，适用于 父组件=>子组件

2.分类:默认插槽、具名插槽、作用域插槽

3.使用方式：

1）默认插槽：(数据在父组件中)

父组件中：

<category>

<div>HTML数据结构</div>

</category>

子组件中：

<template>

<div>

<!--定义插槽-->

<slot>插槽默认内容..</slot>

</div>

</template>

2）具名插槽：（数据在父组件中）

父组件中：

<category>

<template slot="center">

<div>HTML数据结构</div>

</template>

<template v-slot="footer">

<div>HTML数据结构</div>

</template>

</category>

子组件中：

<template>

<div>

<!--定义插槽-->

<slot name="center">插槽默认内容</slot>

<slot name="footer">插槽默认内容</slot>

</div>

</template>

3）作用域插槽：（数据在子组件中，通过绑定：，将数据从子组件传给父组件，父组件用slot="xxx"接收[slot=“xxx”中的xxx可以随意定]

1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者决定。（games数据在category组件中，但使用数据所遍历出来的结构由App组件决定）

2.具体编码:

父组件中:

<category>

<template scope="scopeData">

<!--生成的是ul列表-->

<ul>

<li v-for="g in scopeData.games" :key="g">{{g}}</li>

</ul>

</template>

<category>

<category>

<template slot-scope="scopeData">

<!--生成的是h4标题-->

<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>

</template>

<category>

子组件中:

<template>

<div>

<slot :games="games"></slot>

<div>

</template>

<script>

export default {

name:'category',

data(){

return {

games:['红色警戒','穿越火线','劲舞团','超级玛丽']

}

}

}

vuex中的四个map方法：

1.mapState方法：用于帮助我们映射state中的数据作为计算属性

computed：{

//借助mapState生成计算属性：sum、school、subject（对象写法）

...mapstate(sum:'sum',school:'school',subject:subject)

//借助mapState生成计算属性：sum、school、subject（数组写法）

...mapstate(['sum','school','subject'])

}

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed：{

//借助mapGetters生成计算属性：bigSum（对象写法）

...mapGetters(bigSum:'bigSum')

//借助mapGetters生成计算属性：bigSum（数组写法）

...mapGetters(['bigSum'])

}

3.mapActions方法：用于帮助我们映射actions中的数据为计算属性

methods: {

//借助mapActions生成，incrementOdd、incrementWait（对象形式）

...mapActions(incrementOdd:'jiaOdd',incrementWait:'jiaWait')

//借助mapActions生成，incrementOdd、incrementWait（数组形式）

...mapActions(['jiaOdd','jiaWait'])

}

路由：

1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）管理

2.前端路由：key是路径，value是组件

一、基本使用

1.安装vue-router，命令：npm i vue-router@3 (@后面跟的是版本号，vue2使用的是3版本， vue3使用的是4版本，默认安装的是4版本)

2.应用插件(在main.js中应用)

//先引入 import VueRouter from 'vue-router'

Vue.use(VueRouter)

3.编写router配置项：

//引入VueRouter

import VueRouter from 'vue-router'

//引入路由组件

import About from './components/About'

import Home from './components/Home'

//创建router实例对象，去管理一组一组的路由规则

export default new VueRouter({

routes:[

{

path:'/about',

component:About,

},

{

path:'/home',

component:Home,

}

]

})

4.实现切换

<router-link active-class="active" to="/about"></router-link>

5.指定展示位置

<router-view></router-view>

二、注意点

1.路由组件通常存放在 pages文件夹，一般组件通常放在 components文件夹中

2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息

4.整个应用只有一个router，可以通过组件的 $router 属性获取到

三、路由的query参数

1.传递参数

<!-- 跳转并携带query参数，to的字符串写法-->

<route-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>

<!-- 跳转并携带query参数,to的对象写法-->

<<route-link

:to="{

path:'home/messag/detail/detail',

query:{

id:666,

title:'你好',

}

}">跳转

</route-link>

2.接收参数:

$route.query.id

$route.query.title