<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
component 内置组件
-->
<div id="app">
<button @click="fn('one')">One</button>
<button @click="fn('two')">Two</button>
<!--
is : 负责显示哪个组件
值 : 组件的名称 , name
-->
<component :is="componentName">
<one></one>
<two></two>
</component>
</div>
<script src="./vue.js"></script>
<script>
Vue.component('one', {
name: 'one',
template: `<div>子组件one</div>`
})
Vue.component('two', {
name: 'two',
template: `<div>子组件two</div>`
})
const vm = new Vue({
el: '#app',
data: {
componentName: 'one'
},
methods: {
fn(name) {
this.componentName = name
}
}
})
</script>
</body>
</html>
