Vue中组件的应用——登录和注册板块的切换

Vue中组件的应用

作为一个Vue的初学者，今天学到了Vue一个非常有意思的元素，就是componet。component组件是vue中特意为了实现UI界面的组件化而设计的。而UI的组件化是为了考虑页面内元素的复用而考虑出来的。打个比方就是，有一个商品详情页面，这个页面内部包括有购物车组件，商品列表组件，添加商品组件等。而这些组件有可能在其他的页面内执行相同的功能。所以为了避免代码的重复书写而增加代码的冗余，通过Vue我们可以将这些重复利用的元素开发成一个组件，而被当成组件的这些功能可以被应用到任何的页面中，有点像模块化的思想，是不是很方便呢？
今天，我们就来讲一下Vue组件是如何应用的，以及创建的方式。

创建登录和注册按钮来在同一页面切换不同的板块

这里，我们通过演示登录和注册切换的案例来逐步讲解component组件。

1.通过v-if 方式实现板块切换

首先在component组件下注册登录板块和注册板块

Vue.component ('login', {
      template: '<h3>登录组件</h3>'
  })
Vue.component ('register', {
      template: '<h3>注册组件</h3>'
 })

这里，我们采用全局注册的方式来实现，具体详细说明请看Vue官方文档。


之后，创建登录和注册的超链接按钮

<a href="" @click.prevent="flag=true">登录</a>
<a href="" @click.prevent="flag=false">注册</a>

这里click点击事件运用的prevent属性，原因是我们不想让点击事件时页面刷新。


在页面中添加我们之前创建的登录和注册的component组件

<login></login>
<register></register>

我们看一下效果：

好了，现在我们要做的就是将一个组件隐藏，当点击另一个注册事件时，隐藏当前的组件，显示另外的组件。
基于上述逻辑，我们采用 v-if 命令。

data: {
        flag: true,
    },

设置flag用来隐藏组件，初始化flag值是其默认显示登录板块


在板块组件中添加命令

<login v-if="true"></login>
<register v-else="false"></register>

看下效果：

2.通过占位符来实现

首先我们在data中绑定一个事件名称,我们叫“comName”,默认绑定login板块

data: {
        comName: 'login'
    },

之后，我们在DOM页面中运用component占位符，并绑定comName

<component :is="comName"></component>

我们在按钮中修改一下点击事件

<a href="" @click.prevent="comName='login'">登录</a>
<a href="" @click.prevent="comName='register'">注册</a>

我们再刷新页面

也成功切换了板块。


是不是很有意思。作为初学者，由于技术有限，不能为大家进行更深层的解答，在这里表示歉意。今后，一定为大家逐渐带来关于Vue的更优质的解答！