Vue组件切换

Vue组件切换教程

我们除了可以使用 Vue 的 v-if 和 v-else 来实现组件的切换。Vue 还提供了 component ，来展示对应名的组件，可以实现组件的切换。

component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称。:is 属性中的组件名称，必须是带单引号的，否则程序会报错。

Vue组件切换详解

语法

<body>
	<div id="app">
	   <component :is="comName"></component>
    </div>
</body>

说明

只需要将这里的 comName 设置成对应的组件名，相对于的组件就会在这展示。

案例

Vue组件切换

<!DOCTYPE html>
<html>
<head>
	<title>Vue组件切换</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
        <!-- Vue 提供了 component ,来展示对应名的组件 -->
        <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->
	   <component :is="comName"></component>
        <p>嗨客网（www.haicoder.net）</p>
    </div>
</body>
<script type="text/javascript">
	Vue.component("login", {
		template:"<h2>登录组件-组件切换</h2>"
	});
    Vue.component("register", {
        template:"<h2>注册组件-组件切换</h2>"
    });
	var vm = new Vue({
        el : '#app',
        data:{
            comName:'login'
        }
    });
</script>
</html>

浏览器运行效果，如下图所示：

12 vue component change.png

我们首先使用 Vue.component() 方法来创建了两个全局的 Vue 组件，一个是 login 组件，一个是 register 组件。接下来，我们在 HTML 元素中使用 component 将其 :is 属性设置为组件名，来实现了组件的切换。

Vue组件切换总结

Vue 提供了 component ，可以实现组件的切换。

component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称。:is 属性中的组件名称，必须是带单引号的，否则程序会报错。