【Vue】组件的定义与切换

桃扇骨 2021-11-11 23:48 356阅读 0赞

**本文笔记基于「千古壹号」的GitHub项目：[https://github.com/qianguyihao/web][https_github.com_qianguyihao_web]  
非商业用途自由转载，保持署名，注明出处！**

--------------------

### 文章目录 ###

*  1.定义
 *  2.使用methods和data
 *  3.切换组件
 *   *  3.1 方法1：v-if和v-else
     *  3.2 方法2：绑定:is
     *  3.3 方法3：设置动画且绑定：is
 *  4.小结

# 1.定义 #

1.定义模板；

2.定义（调用）组件；

3.注册组件。

Vue.component('temp',{ 
                template:'#mytemp'
            });/* 使用组件处的标签名，模板 */

4.Vue实例

new Vue({ 
                el:'#app'
            });

以上是全局模式，任何实例都能调用，若改成当前实例可用，则使用私有组件 components：

new Vue({ 
                el: '#app',
                data: { },
                components: {  // 定义、注册Vue实例内部的私有组件
                    temp: { 
                        template: '#mytemp'
                    }
                }
            });

# 2.使用methods和data #

*  若模板内定义 \{ \{myData\}\}
 *  添加在template: '\#mytemp’后面,data改为一个方法

data() { 
              return{ 
                  myData: 'hyo'
              }      
     },
     methods: { 
              login() { 
                  alert('登录操作');
               }
     }

# 3.切换组件 #

## 3.1 方法1：v-if和v-else ##

*  设置超链接事件

*  定义组件

<login v-if="flag"></login>
    <register v-else="flag"></register>//false才显示

*  定义模板与注册组件可以写在一起，如

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

*  Vue命令

var vm = new Vue({ 
                el: '#app',
                data: { 
                    flag: false
                },
                methods: { }
            });

## 3.2 方法2：绑定:is ##

在html中提供component标签，

在Vue命令中：

data: { 
                    comName: 'register' // 当前 component 中的 :is 绑定的组件的名称，表示显示注册
                },

js中其他代码同方法1

## 3.3 方法3：设置动画且绑定：is ##

引入动画模块，结合方法1和方法2  
在html中，设置超链接事件：

利用mode设置动画事件

js中代码同方法2，css动画是基本设置

# 4.小结 #

*  在HTML中中定义模板，调用组件，js中注册组件
 *  定义模板可以写在第3部分
 *  动画事件比较方便于组件的切换

--------------------