老师您好,在学习4.7作用域插槽的时候,在子组件中使用li循环可以显示,在父组件中使用slot-socpe="props"的时候,提示props未定义

Question

代码如下:

<div id="root">
   <child>
       <template slot-scope="props">
           <li>{{props.item}}</li>
       </template>
   </child>
</div>

<script>
   Vue.component('child',{
       data:function(){
           return{
               list:[1,2,3,4,5]
           }
       },
       template:`<div>
                   <ul>
                       <slot v-for="item of list"
                       :item=item
                       ></slot>
               </ul>
               </div>`
   });

   var vm=new Vue({
       el: '#root',
   });
</script>

按照您的视频尝试了两次,依然未看出跟您的代码有何区别,直接在子组件内进行li循环可以显示list,使用solt就一直是同样的错误,提示:

 Property or method "props" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

TypeError: Cannot read property 'item' of undefined

麻烦您帮忙看一下好吗?谢谢了

Answer 1

Dell 2018-12-19 22:42:20

请不要用props这个变量，换一个其他名字试一下

Answer 2

sunguoguo 2018-12-17 15:52:44

遇到相同的问题，请问怎么解决的？

Answer 3

qq__9987 2018-05-21 13:40:56

怎么我没问题，你們都有问题。。

Answer 4

kevinchen1 2018-05-20 12:18:54

官网都是提供2.4.0的开发版本的包,老师怎么解决这个问题.

Answer 5

Dell 2018-04-24 17:39:27

明白，这个我看一下，我觉得应该是升级了语法，看起来问题不大，你先继续往下学

Answer 6

Dell 2018-04-17 00:44:49

把props换一个名字试试

• 提问者 路過Kuma #1

  老师您好,我尝试将props改为temp或者test
  <child>
          <template slot-scope="temp">
              <li>{{temp.item}}</li>
          </template>
      </child>
  但是依然报错,提示还是未定义
  [Vue warn]: Property or method "temp" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
  
  (found in <Root>)
  warn @ vue.js:435

• Dell 回复 提问者 路過Kuma #2

  先往下看，我回家看一下这个问题

• 安然自若6 回复 Dell #3

  老师这个问题解决了吗？我现在也出现了同样的问题

点开查看后面4条评论