Subscribe on changes!

【compiler-core】为什么插槽混用会导致作用域不明确的问题?会导致编译阶段报错,且报错内容难以定位是插槽混用导致的

avatar
Apr 26th 2022

Version

3.2.33

Reproduction link

Vue SFC Playground

Steps to reproduce

  1. 打开复现链接
  2. 去掉 src/App.vue 中的注释内容

What is expected?

希望页面能够正常渲染,因为从代码内容来看,作用域是明确的

What is actually happening?

编译阶段报错:

Codegen node is missing for element/if/for node. Apply appropriate transforms first.

不太理解文档中的「导致作用域不明确」具体是什么问题

image
avatar
Apr 26th 2022

这种用法是错误的,当你使用default插槽时,会把default插槽原先的内容替换掉。header插槽和footer插槽不存在于default里面,Vue也就无法找到这两个插槽

avatar
Apr 26th 2022

插槽里面用插槽确实会报错

<template>
  <Child v-slot="slotPropsDefault">
      <h2>default {{ slotPropsDefault.task }}</h2>
    
    <template v-slot:header="slotPropsHeader">
        <h2>header, {{slotPropsHeader.task}}</h2>
    </template>

    <template v-slot:footer="slotPropsFooter">
        <h2>footer, {{slotPropsFooter.task}}</h2>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue'
export default {
  name: "App",
  components: {
    Child,
  },
};
</script>

报错示例

avatar
Apr 26th 2022

这种用法是错误的,当你使用default插槽时,会把default插槽原先的内容替换掉。header插槽和footer插槽不存在于default里面,Vue也就无法找到这两个插槽

@coder-hxl 确实是这样,谢谢!