Here, I use an example of switching between two components of registered login to demonstrate:
Switching mode 1
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Duxiu does not like Xiu</title>
</head>
<body>
<div id="app">
<a href="#"@click.prevent=" flag = true "> login</a>
<a href="#"@click.prevent=" flag = false "> registration</a>
<!-- Display login components by default -->
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
Vue.component('login', {
template: '<h3>Login component</h3>'
});
Vue.component('register', {
template: '<h3>Registration component</h3>'
});
const vm = new Vue({
el: '#app',
data: {
flag: true
},
});
</script>
</body>
</html>
The only disadvantage of this method is that it can only switch before two components. When three or more components are required to switch, this will not work (because flag has only true and false values), so we need to use mode two.
Switching mode 2
Here, we need to learn an element component officially provided by Vue.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Duxiu does not like Xiu</title>
</head>
<body>
<div id="app">
<a href="#"@click.prevent=" comName ='login'"> Log in</a>
<a href="#"@click.prevent=" comName ='register'"> Registration</a>
<!--
Vue Provided component To show components with corresponding names
component Is a placeholder
:is Property specifies component name
-->
<component :is="comName"></component>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// Component name is a string
Vue.component('login', {
template: '<h3>Login component</h3>'
});
Vue.component('register', {
template: '<h3>Registration component</h3>'
});
const vm = new Vue({
el: '#app',
data: {
comName: 'login'// current component Medium :is Binding component name
},
});
</script>
</body>
</html>
Now, we're adding an exit component (to demonstrate the benefits of the second component switching approach)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Duxiu does not like Xiu</title>
</head>
<body>
<div id="app">
<a href="#"@click.prevent=" comName ='login'"> Log in</a>
<a href="#"@click.prevent=" comName ='register'"> Registration</a>
<a href="#"@click.prevent=" comName='out'"> Exit</a>
<!--
Vue Provided component To show components with corresponding names
component Is a placeholder
:is Property specifies component name
-->
<component :is="comName"></component>
</div>
<script src="./lib/vue-2.4.0.js"></script>
<script type="text/javascript">
// Component name is a string
Vue.component('login', {
template: '<h3>Login component</h3>'
});
Vue.component('register', {
template: '<h3>Registration component</h3>'
});
Vue.component('out', {
template: '<h3>Quit component</h3>'
});
const vm = new Vue({
el: '#app',
data: {
// Display login components by default
comName: 'login'// current component Medium :is Binding component name
},
});
</script>
</body>
</html>
The switch was successful.