效果：
代码：
/* * @Author: mikey.zhaopeng * @Date: 2017-04-21 11:05:34 * @Last Modified by: mikey.zhaopeng * @Last Modified time: 2017-04-21 11:05:34 */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动态组件绑定</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" name="" value="切换到第一个组件" @click="changBtn(1)">
<input type="button" name="" value="切换到第二个组件" @click="changBtn(2)">
<input type="button" name="" value="切换到第三个组件" @click="changBtn(3)">
<!--内置提供的标签 渲染-->
<!--保留状态属性标签-->
<keep-alive>
<component :is="current"></component>
</keep-alive>
</div>
<script type="text/javascript">
//如果三个组件 则按钮 分布执行
var custom1 = Vue.component("custom1", {
template: `
<div @click="changColor">我是第一个组件</div>
`,
methods: {
changColor(ev) {
ev.target.style.color = "red"
}
}
})
var custom2 = Vue.component("custom2", {
template: `
<div>我是第二个组件</div>
`
})
var custom3 = Vue.component("custom3", {
template: `
<div>我是第三个组件</div>
`
})
var vm = new Vue({
el: "#app",
data: {
current: ""
},
methods: {
changBtn(num) {
if (num > 0) {
return this.current = "custom" + num
}
}
}
})
</script>
</body>
</html>
注意点：