vue.js动态组件问题
试验网址：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;
}
}
})
以上是 vue.js动态组件问题 的全部内容， 来源链接： utcz.com/p/937001.html
