vueスロットで問題が発生したことをメモします.vueテンプレートにはルートオブジェクトが1つしかありません.
7841 ワード
最近はvueフレームワークの先端を作る必要があり、「この言語を使う以上、vue文法を一度やってみよう」と抱負しています.今日slotインスタンスを作成するときにブラウザがエラーを報告しました.エラー情報は以下の通りです.
エラーメッセージは、vueテンプレートにはルートオブジェクトが1つしかありません.そしてtoDoListコンポーネントtemplate内のhtmlコードがdivまたは別のラベルですべての要素
to-do-listテンプレートコードを変更すると、正常に表示されます.
vue.js:634 [Vue warn]: Error compiling template:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
1 |
2 | todo-list
3 |
| ^^^^^^^^^^^^^
4 |
| ^^^^^^^^^^^^
found in
--->
エラーメッセージは、vueテンプレートにはルートオブジェクトが1つしかありません.そしてtoDoListコンポーネントtemplate内のhtmlコードがdivまたは別のラベルですべての要素
のフロントエンドコードを包んでいないのを見ました.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<div id="app">
<todo-list>
<div> div>
todo-list>
div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script>
//vue
Vue.component('todo-list',{
props: {
},
// template ， dom ， ` `
template: `
todo-list
` ,
data:function(){//data ， vue
return{
}
}
})
var vm= new Vue({
el:"#app",
})
script>
body>
html>
to-do-listテンプレートコードを変更すると、正常に表示されます.
<div>
<div> todo-list div>
<slot>slot>
div>