极客观点
研发管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="dr01">
<child01></child01>
</div>
<script>
Vue.component("child01", {
data: function() {
return {
cMsg: "this is child msg!",
cParentMsg: this.$parent.dr01Msg, //child01的上级信息就是dr01的dr01Msg
cRootMsg: this.$root.rootMsg, //child01的根信息就是dr01的rootMsg
}
},
template: "<div>cMsg: {{cMsg}}, cParentMsg: {{cParentMsg}}, cRootMsg: {{cRootMsg}}</div>"
+"<grandson01 :s-parent-msg='cMsg'></grandson01>"
});
//自定义孙代组件grandson01，
Vue.component("grandson01", {
data: function() {
return {
sMsg: "this is grandsonMsg1",
sRootMsg: this.$root.rootMsg, //grandson01根信息就是dr01的rootMsg
}
},
//grandson01上级信息就是child01的cMsg,
//在这里使用props属性，将子代cMsg赋给孙代的“sParentMsg”，示例：在子代模板中：<grandson01 :s-parent-msg='cMsg'></grandson01>
props:["sParentMsg"],
template: "<div>sMsg: {{sMsg}}, sParentMsg: {{sParentMsg}}, sRootMsg: {{sRootMsg}}</div>"
})
var dr01 = new Vue({
el: "#dr01",
data: {
dr01Msg: "this is dr01Msg!",
rootMsg: "this is rootMsg!",
},
});
</script>
</body>
</html>我在child01子组件的template里又加了grandson01组件 可是页面不显示grandson01组件内容 还报了一个警告:
vue.js:525 [Vue warn]: Component template should contain exactly one root element:
<div>cMsg: {{cMsg}}, cParentMsg: {{cParentMsg}}, cRootMsg: {{cRootMsg}}</div><grandson01 :s-parent-msg='cMsg'></grandson01>
If you are using v-if on multiple elements, use v-else-if to chain them instead求各位指教
错误提示很清楚了：
只能有一个根元素
<div>abcde....<grandson01 ></grandson01></div>，不能<div>abcde....</div><grandson01></grandson01>