Vue.js
Vue.js 源码剖析-响应式原理
VueJS中学习使用Vuex详解
Vue小技巧
vue 处理组件边界情况
Vue中循环渲染img标签中的src
Virtual DOM 的实现原理
Vue.js问答3
Vue过滤器、修饰符、动画
Vue.js 源码剖析-模板编译和组件化
模拟Vue.js响应式原理
Vue.js基础回顾
Vue.js问答2
Vue.js 源码剖析-虚拟DOM
Vuex 状态管理
Vue-Router 原理实现
Vue.js问答
Vue.js生命周期
Vue.js指令
Vue.js基础难点总结
有道无术，术尚可求。有术无道，止于术！
-
+
首页
Vue小技巧
# Vue小技巧 ## 1. 父子组件传值 当子组件通过this.$emit('handler', val)给父组件传值的时候，父组件接收该事件有两种方式，一种是在methods中注册事件，另外一种是在子组件行内直接使用$event作为子组件传递的参数。  ## 2.不相关组件之间的传值 当两个组件毫无关系，但是想互相传值，可以通过eventbus来传值。具体如下图：  ## 3.在vue中使用store中的state值，因为需要再模板中重复写入 ```html count：{{ $store.state.count }} <br> msg: {{ $store.state.msg }} ``` 所以可以在computed中，实用计算属性将其取出来。厄齐尔store暴露出来的mapXXX方法，会直接返回计算属性。因此可以写成： ```javascript computed: { // count: state => state.count,这里是mapState真实返回的结果 // ...mapState(['count', 'msg']) // 这是数组写法，下面对象的写法是用来变更变量名的 ...mapState({ num: 'count', message: 'msg' }) } ``` ## 4.提交Mutation 通过$store.commit('methodName', params)来提交mutation，进而改变store中的state的中的值。 同样，还可以使用...mapMutations(['methodName']),但是mapMutations不能再放到computed计算属性中了，而是需要放在methods中。 **不要在mutations中提交异步状态的修改！！！** 
Leo
2023年7月21日 16:10
转发文档
收藏文档
上一篇
下一篇
手机扫码
复制链接
手机扫一扫转发分享
复制链接
Markdown文件
分享
链接
类型
密码
更新密码