插槽为什么会报错
来源：4-12 编程练习
慕仰5025445
2020-09-27 16:47:42
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
#app {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<body-component>
<!-- 在此补充代码 -->
<h3 slot="one">望岳</h3>
<p slot='two'>岱宗夫如何？齐鲁青未了。
造化钟神秀，阴阳割昏晓。
荡胸生曾云，决眦入归鸟。
会当凌绝顶，一览众山小。</p>
</body-component>
</div>
<script>
Vue.component('body-component', {
// 在此补充代码
template:`
<slot name="one">无题</slot>
<p>杜甫</p>
<slot name='two'>无内容</slot>
`
});
var vm = new Vue({
el: "#app"
})
</script>
</body>
</html>
1回答
-
好帮手慕久久
2020-09-27
同学你好，问题解答如下：
报错是因为使用插槽slot作为根元素了，vue中，不允许使用插槽作为根元素，建议将内容放在一个div中（div元素可以换成其他html元素），如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题