为什么加v-就报错呢
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!-- <!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>4-13作用域插槽</title> <script src="./vue.js"></script></head>
<body> <div id="app"> <list> <template slot-scope="props"> <h1> {{props.item}} </h1> </template> </list> </div></body><script> Vue.component('list', { data() { return { arr: [1,2,3,4] } }, template: ` <div> <slot v-for="item of arr" :item="item"></slot> </div> ` }) var vm = new Vue({ el: '#app', data: {} })</script>
</html> -->
<!DOCTYPE html><html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>4-13作用域插槽</title> <script src="./vue.js"></script></head>
<body> <div id="app"> <list> <template slot-scope="props"> <div> {{props.item.name}} </div> </template> </list> </div></body><script> Vue.component('list', { data() { return { arr: [{ name: '陈泽鹏' }, { name: '马英' }, { name: '陈田轩' }] } }, template: ` <div> <slot v-for="item of arr" :item=item></slot> </div> ` }) var vm = new Vue({ el: '#app', data: {} })</script>
</html>
正在回答 回答被采纳积分+1
同学你好， 老师测试同学粘贴的代码，并没有出现报错，如下图所示：
即使是注释的代码，打开注释后测试也没有报错，如下图所示：
同学具体是指哪里添加v-就会报错，报的是什么错呢，可以图文结合详细下，便于帮助同学准确高效的定位与解决问题。
祝学习愉快~
-
同学你好， 因为vue语法中没有v-slot-scope这个语法，所以写成v-slot-scope="props"会报错。
官网中新语法是使用v-slot指令，替代slot和slot-scope，如下图所示
参考下图修改：
祝学习愉快~
2020-11-28 10:50:32
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 239 份
- 解答问题 10739 个
本阶段带你深入前端开发的肌理，通过ES6基础知识和前端主流高级框架的学习，助你快速构建企业级移动webAPP应用，进入职场的终极battle
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星