vue的作用域插槽方面的疑问

首先,我在main.js里vue的原型上挂载了一个全局变量

...
vue.prototype.$global="全局变量"
...

然后在vue的template模板里面调用,是能够正常显示的

...
<span>{{this.$global}}</span>
...

但是我在使用了作用域插槽的组件里调却返回了null,去掉this.之后是能够正常显示的

//child
<div class="child">
 <slot :user="user">{{user.name}}</slot>
</div>

//parent
...
<child>
 <template v-slot:default="scope">{{scope.user.gender}} {{this.$global}}</template>
</child>
...

所以有点小疑问,作用域插槽是不是改变了this的指向,如果改变了,改变之后的this指的是哪里

阅读 2.2k
1 个回答

作用域插槽在经过vue-template-compiler转换后,会变成render函数的第2个参数(data对象)中的scopedSlots对象的一部分。scopedSlots对象的key是插槽名,值是render函数。
这个render函数在后续的createElement过程中,会被normalizeScopedSlot标准化处理。
normalizeScopedSlot中会将这个函数包装,改变其上下文

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题