极客观点
项目管理
HarmonyOS
如下面代码，哪里错了，运行之后浏览器里图片和文字没有加载出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多层组件通信</title>
</head>
<body>
<div id="app">
<my-parent :imgtitle='title' :imgsrc='img'></my-parent>
</div>
<template id="my_img">
<img :src="imgsrc" width="200">
</template>
<template id="my_title">
<h2>{{title}}</h2>
</template>
<template id="my_parent">
<div>
<child1 :imgsrc="imgsrc"></child1>
<child2 :title="imgtitle"></child2>
</div>
</template>
<script src="js/vue.min.js"></script>
<script>
//1.子组件的实例
let Child1 = Vue.extend({
template:'#my_img',
props:['imgsrc']
});
let Child2 = Vue.extend({
template:'#my_title',
props:['title']
});
//注册父组件
Vue.component('my-parent',{
props:['imgtitle','imgsrc'],
compoents:{
'child1':Child1,
'child2':Child2
},
template:'#my_parent'
});
new Vue({
el:'#app',
data:{
title:'我很帅',
img:'img/01.jpg'
}
});
</script>
</body>
</html>
compoents-->components