1.动态组件 <component :is=‘组件名’></component>
结合v-for循环使用
<template>
<div>
<component v-for="(item,index) in componentList" :key="index" :is="item"></component>
// 编译以后的效果就是
// <ColorIn></ColorIn>
// <LineIn></LineIn>
// <Header></Header>
// <Footer></Footer>
</div>
</template>
import ColorIn from '@/components/Magic/ColorIn.vue'
import LineIn from "@/components/Magic/LineIn.vue";
import LineIn from "@/components/Magic/Header.vue";
import LineIn from "@/components/Magic/Footer.vue";
export default{
components:{
ColorIn,
LineIn,
Header,
Footer
},
data () {
return {
componentList:['ColorIn','LineIn','Header','Footer']
}
},
}
2.watch进阶使用
立即执行 ⇒ immediate
-
使用环境
eg:场景为页面一进来就调用拉取列表数据
getList()
,随之监听路由的$route.query.id
最后触发列表数据的更新 -
实际使用
为了进入界面就执行,需要在
created()
生命周期中,执行一次拉取数据的方法
watch:{
'$route.query.id':{
handler(){
this.getList();
},
}
},
created(){
this.getList();
}
使用 immediate
立即执行,可简化代码:
watch:{
'$route.query.id':{
handler(){
this.getList();
},
immediate:true
}
}
深度监听
-
使用环境
在监听对象的时候,对象的内部属性发生变化 watch 无法监听到,这种时候就需要使用深度监听
-
实际使用
需要设置
deep:true
即可开启深度监听
data(){
return{
queryList:{
count:0,
name:''
}
}
},
watch:{
queryList:{
handler(newValue,oldValue){
//do something
},
deep:true
}
}
3.mixins混入的使用
-
使用环境
一般获取验证码,收藏,点赞等公用且逻辑一样(有些逻辑是根据页面的不同而不同的,不建议使用混入)等场景都可以使用混入
-
实际使用
封装一个 vue 混入方法,引入后,混入中的所有 data, methods,以及生命周期都会共享,可以直接使用
//openWindow.js
export default {
methods:{
prompt(url){
console.log('我是 mixins !')
},
}
}
// 其他页面引用
import promptMsg from "../../mixins/openWindow";
export default{
// 使用 mixins
mixins:[promptMsg ]
}
注意点(使用的页面统称为组件)
① 混入比组件优先执行
② 当混入与组件中的,属性或者方法名称相同时,以组件中的值为准(结合上一条规则,因为混入先执行,所以组件会将混入覆盖)
③ 比方说A页面和B页面都使用了同一个混入,A页面与B页面的状态同样是独立的
这里有一个注意点(使用 vuex 数据也是共享的,但是 vuex 数据会相互影响;mixins 数据不会相互影响 )