Vue组件

定义 Vue 组件

• 什么是组件
  • 组件的出现，就是为了拆分 Vue 实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可
• 组件化和模块化的不同
  • 模块化：是从代码的逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一
  • 组件化：是从 UI 界面的角度划分的；前端的组件化，方便 UI 组件的重用

创建组件

• 创建全局组件

  创建组件的第一种方式

  • 1 使用 Vue.extend 来创建全局的 Vue 组件
    • 通过 template 属性，指定了组件要展示的 HTML 结构

    var com1 = Vue.extend({
            template: '<h3>这是使用 Vue.extend 创建的组件</h3>' 
                     // 通过 template 属性，指定了组件要展示的 HTML 结构
        });
    

  • 2 使用 Vue.component(‘组件的名称’,创建出来的组件模板对象)
    • 1 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名 ，则在引用组件的时候，需要把大写的驼峰改为小写的字母，同时，两个单词之间，使用 - 连接
    • 2 如果不使用驼峰，则直接拿名称来使用即可

    // 使用了驼峰命名
    Vue.component('myCom1',com1);
    
    // 没有使用驼峰命名
    Vue.component('mycom1',com1); 
    

  • 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可
    • 驼峰命名 和 非驼峰命名

    <!-- 使用了驼峰命名 -->
    <my-Com1></my-Com1>
    
    <!-- 没有使用驼峰命名 -->
    <mycom1></mycom1>
    

  • Vue.component 创建组件
    • Vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是以一个标签形式来引用它的
    • 第二个参数：Vue.extend 创建的组件，其中 template 就是组件要展示的 HTML 内容

    Vue.component('mycom1',Vue.extend({
           template: '<h3>这是使用 Vue.extend 创建的组件</h3>' 
       }));
    

  创建组件的第二种方式

  • Vue.component
    • 注意：不论哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只有唯一的一个根元素
    • 根元素 div

       // 还是使用标签的形式，引入自己的组件 
       <mycom2></mycom2>
    
    Vue.component('mycom2',{
           template: '<div><h3>这是使用 Vue.component 创建的组件</h3><span>123</span></div>' 
       });
    

  创建组件的第三种方式

  • 在被控制的 #app 外面，使用 template 元素，定义组件的 HTML 模板结构

  <div id="app">
       <mycom3></mycom3>
   </div>
   
   <!-- 在被控制的 #app 外面，使用 template 元素，定义组件的 HTML 模板结构 -->
   <template id="tmp1">
       <div>
           <h1>这是通过 template 元素，在外部定义的组件结构，这个方式，有代码的提示和高亮</h1>
           <h4>好用，不错！</h4>
       </div>
   </template>
  
   
   <script>
   	Vue.component('mycom3',{
           template: '#tmp1'
       });
   </script>
  

• 创建私有组件

  • 在被控制的 #app 外面，使用 template 元素，定义组件的 HTML 模板结构

  <div id="app2">
        <mycom3></mycom3>
        <login></login>
    </div>
    
  <template id="temp2">         
      <h1>这是私有的 login 组件</h1>
  </template> 
  
  <script>
  	var vm = new Vue({
            el: '#app2',
            data: {},
            methods: {},
            filters: {},
            directives: {},
            components: { // 定义实例内部私有组件的
                login: {
                    template: '#temp2'
                }
            },
  
            beforeCreate() {},
            created() {},
            beforeMount() {},
            mounted() {},
            beforeUpdate() {},
            updated() {},
            beforeDestroy() {},
            destroyed() {},
        });
  </script>
  

组件中的 data 和 methods

• 组件中的 data

  • 1. 组件可以有自己的 data 数据
  • 2. 组件的 data 和实例的 data 有点不一样，实例中的 data 可以作为一个对象，但是组件中的 data 必须是一个方法
  • 3. 组件中的 data 除了必须为一个方法之外，这个方法内部，还必须返回一个对象才行
  • 4. 组件中的 data 数据，使用方式，和实例中的 data 使用方式完全一样

  Vue.component('mycom1',{
            template: '<h1>这是一个全局组件 --- {{ msg }}</h1>',
            data: function() {
                return {
                    msg: '这是组件中 data 定义的数据'
                }
            }
        })
  

• 组件中的 methods

  • 这是一个计数器的组件，身上有个按钮，让 data 中的 count 值 +1

  <div id="app">
        <counter></counter>
        <hr>
        <counter></counter>
        <hr>
        <counter></counter>
    </div>
    
  <template id="tmp1">
        <div>
            <input type="button" value="+" @click="increment">
            <h3>{{ count }}</h3>
        </div>
    </template>
    
  <script>
  	// var dataObj = { count: 0 }
      // 在外部定义，在 data 里直接返回，会造成数据存储在一个内存中，会没有分开性
  	Vue.component('counter',{
            template: '#tmp1',
            data: function() {
                // return dataObj;
                return {
                    count: 0
                }
            },
            methods: {
                increment() {
                    return this.count++;
                }
            }
        });
  </script>
  

组件切换

• 组件切换方式一

  • 使用 v-if 和 v-else 切换

  <div id="app">
        <a href=""  @click.prevent="flag = true">登录</a>
        <a href="" @click.prevent="flag = false">注册</a>
        <login v-if="flag"></login>  <!-- 应用 v-if -->
        <register v-else="flag"></register>
    </div>
  

• 组件切换方式二

  • Vue 提供了 component ，来展示对应名称的组件
  • <component :is="comName"></component>
  • component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称

  <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
  
        <!-- Vue 提供了 component ，来展示对应名称的组件 -->
        <!-- component 是一个占位符，:is 属性，可以用来指定要展示的组件的名称 -->
        <component :is="comName"></component>
  
        <!-- 总结：当前学习了几个 Vue 提供的标签了？？？ -->
        <!-- component，template，transition，transitionGroup -->
    </div>
  

• 组件切换方式三 ------- 动画

  • 通过 mode 属性，设置组件切换时候的模式，先出去再进来

  <style>
        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateX(150px);
        }
  
        .v-enter-active,
        .v-leave-active{
            transition:all 0.8s ease;
        }
    </style>
    
  <div id="app">
        <a href="" @click.prevent="comName='login'">登录</a>
        <a href="" @click.prevent="comName='register'">注册</a>
  
        <!--  通过 mode 属性，设置组件切换时候的模式，先出去再进来 -->
        <transition mode="out-in">
            <component :is="comName"></component>
        </transition>
        
  </div>
  

• 简写

  • 如果一个对象里面有属性，某种情况下可以简写
  • 属性名 等于 属性值

  components: {
                // '组件的名称': '组件的模板对象'
                'login': login 
            }
            
  // 可以简写为下面的
  components: {
                // '组件的名称': '组件的模板对象'
                login   // =====> login : login
            }
  

组件传值