极客观点
项目管理
HarmonyOS
试验网址：https://jsbin.com/walolaqiju/...,js,console,output
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="toReplace">
<component :is="currentComponent" v-bind="componentProps"></component>
<div v-show="!currentComponent" v-for="component in componentsArray">
<button @click="swapComponent(component)">{{component}}</button>
</div></div>
<button @click="swapComponent(null)">Close</button></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
</body>
</html>
new Vue({
el: 'body',
data: {
currentComponent: null,
componentsArray: ['foo', 'bar'],
name:"fffff"},
components: {
'foo': {
props: ["cname"],
template: '<h1>{{cname}}</h1>'
},
'bar': {
template: '<h1>Bar component</h1>'
}},
computed:{
componentProps() {
if (this.currentComponent === 'foo') {
return {
cname: this.name
};
}
return {}; // return empty object
}},
methods: {
swapComponent: function(component)
{
this.currentComponent = component;
}}
})
html5