什么是插件
插件就是对象中有install属性
// 以下就是用插件来批量注册全局组件的案例
import VueEchats from './VueEchats/index.vue'
import MyTable from './MyTable/MyTable.vue'
import VueContainer from './Container/index.vue'
export default {
// vue全局注册组件
install(Vue) {
Vue.component('VueEchats', VueEchats)
Vue.component('MyTable', MyTable)
Vue.component('VueContainer', VueContainer)
}
}
// 插件使用
import Components from '@/views/components'
//console.log(Components, 'Components')
Vue.use(Components)
keep-alive作用
会缓存组件,使用keep-alive可以使页面不会销毁，同时会新增两个生命周期
actived 在`keep-alive`缓存的组件被激活的时候，都会执行`actived`钩子
deactivated 在组件失活的时候，会执行这个钩子
原来的mounted不在执行了
`keep-alive`可以设置以下`props`属性：
- `include` - 字符串或正则表达式。只有名称匹配的组件会被缓存
- `exclude` - 字符串或正则表达式。任何名称匹配的组件都不会被缓存
自定义指令
自定义指令生命周期
一键copy
// 表单重复提交
说说你对slot的理解？slot使用场景有哪些？
// 具名插槽
<template>
<slot>插槽后备的内容</slot>
<slot name="content">插槽后备的内容</slot>
</template>
<child>
<template v-slot:default>具名插槽</template>
<!-- 具名插槽⽤插槽名做参数 -->
<template v-slot:content>内容...</template>
</child>
v-slot:用#代替
作用域插槽
<template>
<slot name="footer" testProps="子组件的值">
<h3>没传footer插槽</h3>
</slot>
</template>
<child>
<!-- 把v-slot的值指定为作⽤域上下⽂对象 -->
<template v-slot:default="slotProps">
来⾃⼦组件数据：{{slotProps.testProps}}
</template>
<template #default="slotProps">
来⾃⼦组件数据：{{slotProps.testProps}}
</template>
</child>
vue路由跳转
私密信息才需要使用params(不在地址栏上显示参数)，一般情况下使用query方式就好了
// 路由组件传参
vuex使用补充
component动态组件在，tabs组件和多步骤表单中非常有用
vue中控制动态样式
<template>
<div>
<!-- 使用对象 -->
<div :class="{ active: isActive, haha: isActive1 }">动态样式控制</div>
<!-- 使用style -->
<div :style="styleObject">style控制样式</div>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
isActive: true,
isActive1: true,
styleObject: {
color: 'red',
fontSize: '13px'
}
}
},
mounted() {},
methods: {}
}
</script>
<style scoped>
.active {
color: red;
}
.haha {
font-size: 17px;
}
</style>
