四川盐亭网站制作公司

vue3中setup参数attrs,slots,emit实例分析

这篇文章主要介绍了vue3中setup参数attrs,slots,emit实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue3中setup参数attrs,slots,emit实例分析文章都会有所收获，下面我们一起来看看吧。

目前创新互联建站已为近1000家的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、治多网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

home.vue


    
  

Helloworld.vue

控制台输出：

props: Proxy {msg: "Welcome to Your Vue.js App"}
context: {expose: ƒ}
attrs: Proxy {proper: "1", __vInternal: 1, onCustome: ƒ}
slots: Proxy {_: 1, __vInternal: 1, one: ƒ}
emit: (event, ...args) => instance.emit(event, ...args)

继续展开：
vue3中setup参数attrs,slots,emit实例分析
结合图里面圈起来的部分，我大概得出的结论

  • context上下文这里应该是指helloworld这个组件

  • attrs也就组件的是那个$attrs(不含props,但是包含函数方法)

  • slots是组件插槽，并且是有被“使用”的插槽，因为另外一个插槽"two"没有对应的模板渲染

  • emit感觉是组件的自定义事件到底是什么呢？但是，这里看控制台输出实际上也得不出什么内容。

想知道以上4条结论理解是否正确。

大致是对的。唯有第一点稍稍有点儿问题，context 不是这个组件的真正对象，只是在 setup 时带了其中一部分信息的玩意儿，执行 setup 时这个组件对象还没被创建出来呢。

不知道题主以前接没接触过 Vue2 或者 Vue3 的 Options API 写法，要是直接上来就是 Vue3 Composition API 确实不太容易理解。

后面仨其实就是 Options API 里的 this.$attrs、this.$slots、this.$emit，因为 setup 时还没有 this 呢，所以变成了这样写。

关于“vue3中setup参数attrs,slots,emit实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“vue3中setup参数attrs,slots,emit实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。


文章标题：vue3中setup参数attrs,slots,emit实例分析
转载注明：http://scyanting.com/article/jjjjpp.html

其他资讯