为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第19天 前端面试技能拼图2

【金秋打卡】第19天 前端面试技能拼图2

2022.11.11 15:53 74浏览

课程名称:2周刷完100道前端优质面试真题
课程章节:第4章 前端面试技能拼图2 :前端基础知识 , 必知必会
主讲老师:双越

课程内容:

今天学习的内容包括:
4-16 -Vue组件通讯有几种方式,尽量全面-props-$attrs——vue3中 $attrs 合并了 $listeners
4-17 -Vue组件通讯有几种方式,尽量全面-props-$parent和$refs——vue3中不建议使用$children
4-18 -Vue组件通讯有几种方式,尽量全面-props-provide和inject——多层级组件通讯,传递动态数据需要将 provide 写成对象。
4-19 -Vuex中action和mutation有什么区别——mutation为同步方法,action可以写异步,可包含多个mutation。

课程收获:

$attrs
  • $listeners 在Vue3中合并到了 $attrs
  • 全量传递需要使用 v-bind="$attrs"
  • 单个DOM节点时,传递参数显示在标签上,可以通过设置inheritAttrs: false隐藏掉
$parent 和 $refs
  • $children 在 Vue3中不建议使用
  • this.$parent.getX()
  • this.$refs.hello1.name
  • 适用于父子组件
provide 和 inject
  • 可用于多层级组件通讯
provide
  • 在最顶层产生
provide:{
	info: 'aaa' // 静态
}

provide(){
	return {
		info: computed(() => this.name)  // 动态传递数据
	}
}
inject
  • 在需要的层级组件使用
inject: ['info']
Vue组件通讯的方式
  • props和$emit
  • 自定义事件
  • $attrs
  • $parent
  • $refs
  • provide/inject
  • Vuex
不同场景
  • 父子组件
  • 上下级组件(跨多级)通讯
  • 全局组件
Vuex中action和mutation有什么区别
  • mutation:原子操作;必须同步代码;
  • action:可包含多个 mutation;可包含异步代码;

今天的 学习了 Vue组件通讯有几种方式 - $attrs,$parent,$refs,provide,inject 和Vuex中action和mutation有什么区别。多层级组件通讯可以使用provide(动态通讯需要使用对象),mutation是一个同步方法,action是一个集合,可包含多个原子操作mutation。

下一步就是 学习 JS严格模式有什么特点。今天学习就先到这里吧。

坚持打卡,坚持学习,未来可期,加油😀~

​​​​​​​
​​​
https://img1.sycdn.imooc.com/636df05e00018ab723571423.jpg

https://img1.sycdn.imooc.com/636dfaf00001a15a23531432.jpg

https://img1.sycdn.imooc.com/636dfdec000188ac23641438.jpg

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
1

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消