slot 插槽
1.普通插槽
// 子组件
<template>
<div>
<!-- 普通插槽 -->
<slot>默认值显示内容</slot>
</div>
</template>
// 父组件
<template>
<div class="home">
<TempA></TempA>
</div>
</template>
2.具名插槽
// 子组件
<template>
<div>
<!-- 具名插槽 -->
<slot name="header">默认值显示内容</slot>
</div>
</template>
// 父组件
<template>
<div class="home">
<TempA>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
</TempA>
</div>
</template>
3.作用域插槽
// 子组件
<template>
<div>
<!-- 作用域插槽 -->
<slot :info='info' name="propTemp"></slot>
</div>
</template>
// 父组件
<template>
<div class="home">
<TempA>
<template v-slot:propTemp='scope'>
<h1>{{scope.info.name}}</h1>
</template>
</TempA>
</div>
</template>
computed 实现传参
// template
<div>{{newValue(3)}}</div>
// js
computed:{
newValue(){
return function(num){
return this.value*num
}
}
}
watch监听一个对象时，如何排除某些属性的监听
// 监听data中的obj对象，忽略监听obj对象中的'c','d'属性的变化
// 过滤对象中不需要监听的属性
// 循环需要监听的属性，调用$watch(),传入对应的参数
mounted() {
Object.keys(this.obj).filter((kye) => !['c', 'd'].includes(kye)).forEach((item) => {
this.$watch(
(vm) => vm.obj[item],
(newVal, oldVal) => {
console.log(newVal, oldVal)
this.info.name++
},
{deep: true,}
)
})
},
provide和inject
// 祖先组件
provide(){
return {
// keyName: { name: this.name }, // value 是对象才能实现响应式，也就是引用类型;
keyName: this.changeValue // 通过函数的方式也可以[注意，这里是把函数作为value，而不是this.changeValue()]
// keyName: 'test' value 如果是基本类型，就无法实现响应式
}
},
data(){
return { name:'jp' }
},
methods: {
changeValue(){
this.name = '改变后的名字-xx'
}
}
// 后代组件
inject:['keyName']
create(){
console.log(this.keyName) // 改变后的名字-xx
}
动态指令、动态参数
<template>
...
<Abutton @[someEvent]="handleSomeEvent()" :[someProps]="1000" />
</template>
<script>
data(){
return{
someEvent: someCondition ? "click" : "dbclick",
someProps: someCondition ? "num" : "price"
}
},
methods: {
handleSomeEvent(){
// handle some event
}
}
</script>
vuex 使用
-
index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
actions,
getters,
modules
})
-
state.js 文件夹
export default {
userName:'jp'
}
-
mutations.js 文件
// mutations 是唯一修改state状态的途径，只能同步，不能执行异步
// 通过commit调用 this.$store.commit('updateName',this.name)
// 注意：模块隔离时调用需要加上模块名称 this.$store.commit(' user/updateName',this.name)
export default {
updateName(state,payload){
state.userName = payload
}
}
-
actions.js 文件
// 通过调用mutations中的方法修改state状态，可是执行异步操作
// 通过dispatch调用 this.$store.dispatch('syncFn',1000)
// 注意：模块隔离时调用需要加上模块名称 this.$store.dispatch(' user/syncFn',this.name)
export default {
syncFn({commit},payload){
setTimeout(()=>{
commit('updateName',payload)
},1000)
}
}
-
getters.js 文件
// 状态过滤
// 使用：this.$store.getters.getUserName 他的返回值就是过滤后的数据
// 注意：模块隔离时调用需要加上模块名称 this.$store.getters['user/getAge']
export default{
getUserName(state){
return state.userName +=100
}
}
-
modules 文件夹
- modules/index.js 文件
import user from "./user.js"
import admin from "./admin.js"
export default{
user,
admin
}
- modules/user.js user模块文件
// namespaced属性是模块状态隔离，默认是false,需要隔离设置为true;
// 调用:this.$store.state.user.name / this.$store.dispatch('user/syncUpdate',params)
export default{
namespaced: true, // 模块隔离
state:{
name:'xi,an',
age:18
},
mutations:{
update(state,payload){
state.name = payload
}
},
actions:{
syncUpdate(context,payload){
setTimeout(()=>{
context.commit('update',payload)
},500)
}
},
getters:{
getAge(state){
return `${state.age+1}岁`
}
}
}
- modules/admin.js admin模块文件
// namespaced属性是模块状态隔离，默认是false,需要隔离设置为true;
// 调用:this.$store.state.user.name
// 注意：没有设置模块状态隔离调用mutations/actions/getters/时不用加模块名 this.$store.dispatch('updateName',params)
export default{
namespaced: false,
state:{
name:'beijing',
age:100
}，
mutations:{
updateName(state,payload){
state.name = payload
}
},
}
Vue样式穿透 v-deep /deep/ >>>
>>>如果vue的style使用的是css，那么则
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.
- /deep/
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
但是有些开发者反应，在vue-cli3编译时，deep的方式会报错或者警告。 此时我们可以使用第三种方式
::v-deep切记必须是双冒号
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
