极客观点
项目管理
HarmonyOS
为什么child显示不出来，只显示出来了home跟parent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="home" >
<div>{{home}}</div>
<parent>
<child></child>
</parent>
</div>
<template id="parent">
<p>{{Member_Type}}</p>
</template>
<template id="child">
<p>{{Company_Na}}</p>
</template>
</body>
<script type="text/javascript">
$(function(){
var lan={
"home":"首页"
}
var applyData={
Member_Type: '11',
Company_Na: '22'
};
Vue.component('parent',{
template:'#parent',
data: function(){ //子组件data只能是function
return applyData
},
});
Vue.component('child',{
template:'#child',
data: function(){ //子组件data只能是function
return applyData
},
});
var home = new Vue({
el: '#home',
data: lan,
});
});
</script>
</html>
html改成
才可以
或者写成这样，才能显示
<body >
<div id="home" >
<div>{{home}}</div>
<parent>
<child></child>
</parent>
</div>
</body>
<script type="text/javascript">
$(function(){
var lan={
"home":"首页"
}
var applyData={
Member_Type: '11',
Company_Na: '22'
};
Vue.component('parent',{
template:'<p>{{Member_Type}}<slot></slot></p>',
data: function(){ //子组件data只能是function
return applyData
},
});
Vue.component('child',{
template:'<p>{{Company_Na}}</p>',
data: function(){ //子组件data只能是function
return applyData
},
});
var home = new Vue({
el: '#home',
data: lan,
});
});
</script>
把<slot></slot>标签去掉22也显示不出来，slot标签是干嘛的
请查看官方文档使用插槽分发内容