)包裹起来。如果我写成下面这样,就没有预期的效果:
template: '登录页面
注册页面
'
结果如下:(并非预期的效果)
写法三
上面的写法一、写法二并不是很智能,因为在定义模板的时候,没有智能提示和高亮,容易出错。我们不妨来看看写法三。
写法三:将组件内容定义到template标签中去。
代码如下:
登录页面
注册页面
代码截图如下:
写法三其实和方法二差不多,无非是把绿框部分的内容,单独放在了
标签中而已,这样有利于 html 标签的书写。
使用components定义私有组件
我们在上一段中定义的是全局组件,这样做的时候,多个Vue实例都可以使用这个组件。
我们还可以在一个Vue实例的内部定义私有组件,这样做的时候,只有当前这个Vue实例才可以使用这个组件。
运行效果:
当然,我们还可以把模板的定义存放在
标签中,这样的话,模板里的html标签就可以出现智能提示和高亮,避免出错。如下:
这是私有的login组件
运行效果不变。
为组件添加 data 和 methods
既然组件是一个页面,那么,页面中可能会有一些功能要动态展示。因此,我们有必要为组件添加 data 和 methods。
代码举例如下:
上方代码所示,我们在account
组件中添加的data 和 methods,其作用域只限于account
组件里,保证独立性。
注意,在为组件添加数据时,data不再是对象了,而是function,而且要通过 return的形式进行返回;否则,页面上是无法看到效果的。通过 function返回对象的形式来定义data,作用是:
为什么组件的data必须是一个function
我们先来看下面这样的例子:
{{count}}
运行效果如下:
上面的例子中,将组件
调用了两次,由于dataObj
是全局对象,导致两个组件实例都可以共享这个dataObj
数据。于是,我们点击任何一个组件实例的按钮,都可以让count
数据加1。
现在问题来了,如果我们想让组件
的两个实例去单独操作count
数据,应该怎么做呢?我们应该修改 data中 return出去的内容:
{{count}}
运行效果:
如上图所示,每当我们创建一个新的组件实例时,就会调用data函数,data函数里会return一个新开辟的对象数据。这样做,就可以保证每个组件实例有独立的数据存储。
组件的切换
使用v-if和v-else结合flag进行切换
代码举例:(登录组件/注册组件,二选一)
运行效果如下:
使用Vue提供的
标签实现组件切换
上面的例子中,我们是通过flag的值来进行组件的切换。但是,flag的值只可能有两种情况,也就是说,v-if和v-else只能进行两个组件之间的切换。
那如何实现三个甚至三个以上的组件切换呢?这里,我们可以用到Vue提供的
标签。
我们先来看一下
标签的用法。
基于上面的代码,如果我想让login组件显示出来,借助
标签可以这样做:
上方代码中,提取关键代码如下:
如果我想让register组件显示出来,借助
标签可以这样做:
上方代码中,提取关键代码如下:
因此,如果要实现组件之间的切换,我们可以给
标签里的is属性值设置为变量即可,来看看代码实现。
实现组件切换的完整代码:
效果:
我的公众号
想学习代码之外的软技能?不妨关注我的微信公众号:生命团队(id:vitateam
)。
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外: