is: 指定这个组件显示什么
使用场景:页面的一部分动态切换,例如登录时的手机号注册/短信验证
1、创建两个组件 /components/DuanXin.vue 、 /components/Register.vue
1、引入组件,点击不同的按钮,切换不同的组件,通过is指定显示哪一个组件
<template>
<div>
<div>
<button @click="tabname = 'DuanXin'">短信注册</button>
<button @click="tabname = 'Register'">手机号注册</button>
<component :is="tabname"></component>
</div>
</div>
</template>
<script>
import DuanXin from "../components/DuanXin.vue";
import Register from "../components/Register.vue";
export default {
components: { Son, DuanXin, Register },
data() {
return {
tabname: "DuanXin",
};
},
};
</script>