黑马学习记录--Vue 定义局部子组件以及组件切换

「爱情、让人受尽委屈。」 2022-03-17 07:16 231阅读 0赞

### 使用`components`属性定义局部子组件 ###

1.  组件实例定义方式：

1.  引用组件：

## 使用`flag`标识符结合`v-if`和`v-else`切换组件 ##

1.  页面结构：

1.  Vue实例定义：

## 使用`:is`属性来切换不同的子组件,并添加切换动画 ##

1.  组件实例定义方式：

// 登录组件
        const login = Vue.extend({
          template: `<div>
            <h3>登录组件</h3>
          </div>`
        });
        Vue.component('login', login);
    
        // 注册组件
        const register = Vue.extend({
          template: `<div>
            <h3>注册组件</h3>
          </div>`
        });
        Vue.component('register', register);
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: { comName: 'login' },
          methods: {}
        });

1.  使用`component`标签，来引用组件，并通过`:is`属性来指定要加载的组件：

组件切换

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
    </head>
    
    <body>
      <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
    
        
        
        <component :is="comName"></component>
    
        
        
    
      </div>
    
      <script>
        // 组件名称是 字符串
        Vue.component('login', {
          template: '<h3>登录组件</h3>'
        })
    
        Vue.component('register', {
          template: '<h3>注册组件</h3>'
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>

1.  添加切换样式：

添加切换动画的组件切换

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <script src="./lib/vue-2.4.0.js"></script>
      <style>
        .v-enter,
        .v-leave-to {
          opacity: 0;
          transform: translateX(150px);
        }
    
        .v-enter-active,
        .v-leave-active {
          transition: all 0.5s ease;
        }
      </style>
    </head>
    
    <body>
      <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
    
        
        <transition mode="out-in">
          <component :is="comName"></component>
        </transition>
    
      </div>
    
      <script>
        // 组件名称是 字符串
        Vue.component('login', {
          template: '<h3>登录组件</h3>'
        })
    
        Vue.component('register', {
          template: '<h3>注册组件</h3>'
        })
    
        // 创建 Vue 实例，得到 ViewModel
        var vm = new Vue({
          el: '#app',
          data: {
            comName: 'login' // 当前 component 中的 :is 绑定的组件的名称
          },
          methods: {}
        });
      </script>
    </body>
    
    </html>