props + emits
props:用于接收父组件传递给子组件的数据。可以定义期望从父组件接收的数据结构和类型。‘子组件不可更改该数据’emits:用于定义组件可以向父组件发出的事件。这允许父组件监听子组件的事件并作出响应。(比如数据更新)
props检查属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
type | Function | 指定 prop 应该是什么类型，如 String, Number, Boolean, Object, Array, Function, 或它们的构造函数。 | 无 |
default | any / Function | 指定 prop 的默认值。可以是一个值，也可以是一个返回值的函数。 | 无 |
required | Boolean | 指定 prop 是否必须传递。 | false |
validator | Function | 一个验证函数，用于更复杂的验证逻辑。函数应该返回一个布尔值，表示验证是否通过。 | 无 |
说明
type: 确保prop符合预期的数据类型，有助于在开发过程中捕获错误。default: 当父组件没有传递相应的prop时，提供一个回退值，确保组件即使在没有接收到外部数据的情况下也能正常运行。required: 标记为true时，如果父组件没有提供该prop，Vue 会在控制台中显示警告，这有助于避免因缺少必要数据而导致的错误。validator: 提供了一个更灵活的验证机制，允许开发者定义复杂的验证逻辑，确保prop符合特定的条件或规则。
示例
父
<template><div><!-- 使用对象语法统一传递多个 props <child-component v-bind="propsData"></child-component>--><child-component :size.sync="size":height="height" @my_event ="height = height + $event"></child-component>//:size.sync = :size="size" + @update:size="size = $event"//vue3 废弃</div>
</template><script>
// 导入子组件
import ChildComponent from './ChildComponent.vue'; // 确保文件路径正确export default {data() {return {propsData: {size: 10,myMessage: "test",height: 50,age: 10}};},components: {ChildComponent // 注册子组件}
};
</script>
子–Children
<script>
export default {// props: ['size', 'myMessage'], //简易声明props: {size: Number,// 类型检查height: Number,// 类型检查 + 其他验证age: {type: Number, // 指定 prop 类型为 Numberdefault: 0, // 如果没有提供 age，将使用默认值 0required: true, // 指定 age 必须传递validator: value => {return value > 0; // 验证 age 必须大于 0}} },methods:{ChangeElements(){this.$emit('update:size',v);//:size.sync="size"this.$emit('my_event',v);//:height="height" @my_event ="height = height + $event"}}
}
</script>
.sync
- 一个语法糖
- :value.sync=‘value’ <==> :value=“calue” @update:value=“value = $event”
说明：
- 父组件模板：使用
v-bind指令（或简写为:）和对象语法来统一传递propsData对象中的所有属性作为 props。v-bind="propsData"会将propsData对象中的所有属性作为独立的 props 传递给子组件。 - 父组件数据：在
data返回的对象中定义了一个propsData对象，包含了所有要传递给子组件的属性。 - 子组件 props：子组件定义了
size、myMessage、height和age四个 props，这些 props 用于接收从父组件传递的数据。
--------非父子通信-------
provide + inject
- 跨层级共享数据
父
- 普通类型
非响应式 - 复杂类型
响应式 - 引用传递
<script>
export default{provide(){return{//普通类型[非响应式]age:120,//复杂类型[响应式]a:{b:2,c:3}} }
}</script>
后代
<script>
export default{inject:['age','a'],created(){console.log(this.age,this.a);this.age = 20; //报错不可更改this.a.b = 110;//界面会响应,父类的age同步更改}
}
</script>
event bus
- 事件总线, 在非父子组件之间通信
事件总线
//创建一个都可以访问到的事件总线(空的 Vue实例)
import Vue from 'vue'
const Bus = new Vue();
export default Bus
A组件
<script>
import Bus from 'bus地址'
export default{created(){Bus.$on('AMsg',(msg)=>{console.log(msg)}) }
}
</script>
B组件
<script>
import Bus from 'bus地址'
export default{methods:{sendAMsg(){Bus.$emit('AMsg',"你的消息") }}
}
</script>
Vuex
-
是什么
-
复杂场景组件之间通信
-
vuex是vue的一个状态管理工具,状态就是数据
-
大白话: vuex是一个插件,可以帮助我们管理
vue通用数据(多组件数据共享)
-
-
场景
- 某个状态在多个组件使用(个人信息)
- 多个组件 共同维护 一份数据(购物车)
-
优势
- 数据集中化管理
- 响应式
-
vuex遵循单向数据流
初始配置
-
安装 vuex
npm install vuex@next --save # 对于 Vue 3npm install vuex --save # 对于 Vue2
-
新建vue模块
- 新建
store/index.js文件 专门存放Vuex
- 新建
-
创建仓库
// store/index.js // 导入 Vuex，它是 Vuex 状态管理库的核心 import Vuex from 'vuex';// 创建一个新的 Vuex.Store 实例 // 这个实例将作为全局状态管理器 export default new Vuex.Store({// 定义应用的状态（state）state: {// 一个名为 count 的状态，初始值为 0count: 0},// 定义更改状态的方法（mutations）mutations: {// increment 方法用于更新 count 状态// state 是 Vuex state 对象，v 是传递给 mutation 的参数increment(state, v) {// 将 count 状态更新为传入的参数 vstate.count = v;}},// 定义异步提交状态更改的方法（actions）actions: {// increment 方法用于异步提交 increment mutationincrement({ commit }) {// 调用之前定义的 increment mutationcommit('increment',10);}},// 定义从状态派生的状态（getters）getters: {// doubleCount 方法返回 count 的两倍// state 是 Vuex state 对象doubleCount(state) {// 返回 count 状态的两倍return state.count * 2;}} }); -
挂载main.js
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';// 使用 Vuex 插件
Vue.use(Vuex);new Vue({store,render: h => h(App)
}).$mount('#app');
配置项
new Vuex.Store({配置项})
| 配置项 | 类型 | 描述 |
|---|---|---|
state | Object | 根状态对象，包含所有的状态数据 |
getters | Object | 根getter函数，允许从state派生出一些状态 |
mutations | Object | 同步函数，用于变更state中的状态数据在 ;Vue 3 中，mutations 应改为 actions 和 commit，因为 Vue 3 的 Vuex 4 中不再使用 mutations。 |
actions | Object | 异步操作或复杂逻辑的提交（调用mutation）的包裹函数 |
modules | Object | 命名空间模块对象，用于将store分割成模块 |
plugins | Array | 自定义插件数组，用于进一步处理 actions |
strict | Boolean | 是否开启严格模式，开启后在mutation之外修改state将抛出错误 |
devtools | Boolean / Object | 是否启用 Vue Devtools 支持，可以传递选项对象 |
state
-
根状态对象，包含所有的状态数据
-
核心配置项(必要的)
-
获取数据
- 通过
this.$store.属性名 - 通过 import 导入 store 然后使用
- 通过
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {count: 1},
});
getters
- 根getter函数，允许从state派生出一些状态
- 对数据进一步,派生状态
- 使用
$store.getters.filterList()
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {list: [1,2,3,4,5,6,7,8,9]},getters:{//过滤 <= 5 的数据filterList(state){return state.list.filter(item=> item > 5)}}
});
mutations/actions
-
用于变更state中的状态数据
-
actions:异步操作或复杂逻辑的提交（调用mutation）的包裹函数
-
Mutations：通常使用全小写字母，并且可以使用下划线来分隔单词，例如
update_count。- 第一个参数是
state也就是状态 ,通过state 来调用数据
- 第一个参数是
-
Actions：可以使用驼峰命名法，并且通常在名称中包含动词，以表明它们执行的操作，例如
updateCount。- 第一个参数是context 是上下文,和
state相似
- 第一个参数是context 是上下文,和
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex); // 使用 Vuex 插件const store = new Vuex.Store({state: {count: 10},actions: {async updateCount({ commit }, n) {commit('update_count', n);},async updateCount2(context, n) {context.commit('update_count', n);}},mutations: {//可以同名,但是不推荐update_count(state, n) {state.count = n;}}
});export default store;
modules
分模块
- Vue 使用单一状态树,当项目比较大时,状态会集中,从而导致项目臃肿
- 将vuex配置文件导入 根配置下的 modules 就可以了
导入模块
// store/modules/user.js
const state = { ... };
const mutations = { ... };
const actions = { ... };
const getters = { ... };export default {state,mutations,actions,getters
};
// store/index.js 根模块
import Vuex from 'vuex';
import user from './modules/user';
const store = new Vuex.Store({modules: {user}
});
export default store;
使用
-
子模块state
$store.state.模块名.属性名- mapState映射:
mapState('模块名',['属性名']);
this.属性名就可以访问数据了
-
子模块getters
$store.getters['模块名/属性名称']- mapGetters映射:
mapGeters(‘模块名’,[‘属性名’,‘属性2’])
this.属性名就可以获得数据 模块名/属性名称:是因为命名是时候就是这命名的
-
子模块mutations
$store.commit['模块名/属性名称']- mapMutations映射:
mapMutations(‘模块名’,[‘函数名’,‘函数2’])
this.函数名()就可以调用函数了 模块名/属性名称:是因为命名是时候就是这命名的
-
子模块actions
-
$store.dispatch['模块名/属性名称'] -
mapActions映射:
mapActions(‘模块名’,[‘函数名’,‘函数名2’])this.函数名()就可以调用函数了 -
模块名/属性名称:是因为命名是时候就是这命名的
-
数据的更改
this.$emit()是 Vue 组件中用来触发自定义事件的方法。当调用this.$emit('eventName', param)时，它会向父组件发出一个事件，父组件可以监听这个事件并做出响应。- 同步:
- 而在 Vuex 中，
this.$store.commit('mutationName', param)用于触发状态变更。这里的commit方法用于调用 store 中定义的 mutations，mutations 是同步函数，用于更改 store 中的状态（state）。
- 而在 Vuex 中，
- 异步:
this.$store.dispatch('actionName', payload)来分发 actions。这会告诉 Vuex 执行相应的 action 函数。
辅助函数
mapState
- 将store中的数据,
自动映射到 组件的计算属性中 - 可以直接
this.属性名来访问数据
//引入mapState
import { mapState } from 'vuex';//使用
export default {computed: {// 使用对象展开运算符将所有映射的状态转为计算属性...mapState([// 映射 this.count 为 store.state.count'count']),// 映射 this.doubleCount 为 store.getters.doubleCount...mapState({'doubleCount': state => state.count * 2})}
}
//-------------------
computed:{ ...mapState['状态名'] }
//# 等价
computed:{ '状态名'(){return this.$store.state.count
}}
mapMutatuons
- 将mutations同步函数 中的方法,映射到
methods中 - 可以直接
this.函数名(n)来调用函数
//引入 mapMutatuons
import {mapMutatuons} from 'vuex'
//使用
export default {methods: {...mapMutations(['update_count' // 直接使用 mutation 名称]),...mapMutations({'set_count': 'update_count' // 为 mutation 提供一个别名}),increment() {this.update_count(1); // 调用 Vuex store 的 mutation},decrement() {this.set_count(-1); // 使用别名调用 mutation}}
}
//---------------------------------
methods:{...mapMutations(['方法名'])
}//等价
methods:{'方法名'(参数){this.$store.commit('方法名',参数)}
}
mapActions
- 将actions异步操作中的方法,映射到
methods中 - 可以直接
this.函数名(n)来调用函数
//导入mapActions
import { mapActions } from 'vuex';//使用
export default {methods: {...mapActions(['UpdateCount' // 将 `this.update_count` 映射为 `this.$store.update_count('actionName',obj)`]),...mapActions({'mappedActionName': 'UpdateCount' // 将 `this.mappedActionName` 映射为 `this.$store.dispatch('update_count')`}),}
}
//--------------------
methods:{..,mapActions([方法名])
}
# 等价
methods:{'方法名'(参数){this.$store.dispatch('方法名',参数)}
}
mapGetters
- 将getters中的函数 中的方法,映射到
computed中 - 可以直接
this.函数名(n)来调用函数
示例
<template></template>
<script>
import {mapState,mapMutations,MapActions,MapGetters} form 'vuex'
export default{name:'test',computed:{...mapState(['count']),...maoGetters(['filterList'])},methods:{...mapMutations('updata_count'),...MapActions('UpdataCount')}
}
</script>$refs获取dom
- ref和$refs
- 获取
dom元素或组件实例- ref和$refs=> 当前组件内 (更精确)
- document => 当前页 (范围广)
- 和 id 的用法相似
<template><div ref="MyDom" id="MyDom"></div><TestEl ref="MyEl"></TestEl></template><script>
export default{mounted(){// dom元素this.$ref.MyDom//等价document.getElementById('myDom')//组件实例let vm = this.$ref.MyElvm.get_methods();//可以调用TestEl里面的数据},components:{TestEl}}</script>
$nextTick异步跟新
- Vue采用的是异步跟新
<template><div><div v-if="isShow" ref="_1"> ... </div><div v-else ref="_2"> ... </div></div>
</template><script>export default{data(){return {isShow:true}},methods:{change(){this.isShow = false;this.$ref._2.focus();//警告this.$ref._2为 undefined//因为采用的是异步跟新,所以当前还没有跟新 _2这个元素this.$nextTick(()=>{ //当异步跟新完成后的回调this.$ref._2.focus();})//可以的}}}
</script>
