Vue.js2.x之组件定义和注册的示例分析

运行效果如下：

上面的例子中，将组件调用了两次，由于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属性值设置为变量即可，来看看代码实现。

实现组件切换的完整代码：

 
 
 
 
 


 
  
  登录
  注册
  
  
  
  
 
 

效果：

感谢各位的阅读！关于“Vue.js 2.x之组件定义和注册的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！