文档看了很多遍, 依然是没搞清除这些是什么,就手动写了一个例子帮助自己理解:
home.vue
@@##@@{{ home }} - 子组件插槽的数据:
Helloworld.vue
{{ msg }}
这里是插槽内容:
控制台输出:
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)继续展开:
结合图里面圈起来的部分,我大概得出的结论
立即学习“前端免费学习笔记(深入)”;
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 呢,所以变成了这样写。
【相关推荐:vue.js视频教程】










