vue自定义组件

在单页面项目中，通常会将一部分视图抽象成一个组件（就好似面向对象语言中的类），将要显示的文字或者其他的信息设置成组件的变量，这样就可以在使用时，只需要考虑变量了而不用考虑内部是怎样的。当然了这些只是我的看法。

下面来看看在vue中如何自定义组件，在这里以异步加载组件为例来说明，具体步骤分三步：

1. 首先将视图抽象化：

   <template>
     <div class="more" :style="{width: width}" @click.prevent="more">
       <div class="container">
       <!--传递的信息-->
         <span>{{content}}</span>
       </div>
     </div>
   </template>
   

2. 定义要传的信息以及内部方法
   在这个部分需要考虑的是如何如外部通信以及数据的处理，具体代码如下：

   <script>
   export default {
     name: 'Load-More',
     props: {
    // type表示数据类型，required表示必须传递的值，default表示默认值
       content: {
         type: String,
         required: true,
         default: '加载更多'
       },
       width: {
         type: String,
         default: '100px'
       }
     },
     methods: {
     // $emit这个方式是用来与外部通信的，可以将子组件中的值传递给父组件
     // 如this.$emit('loadMore', this.content)
       more () {
         this.$emit('loadMore')
       }
     }
   }
   </script>
   

3. 设置CSS样式
   这个部分要考虑的就是如何使你的组件更美观了，哈哈，这里是我设计的样式规则，不是很好看。

   <style scoped>
   .more {
     text-align: center;
     height: 4rem;
     line-height: 4rem;
     background: rgba(87,87,87,0.5);
     color: #fff;
     border-radius: 3rem;
     font-size: 1.4rem;
     padding: 0 1rem;
     display: inline-block;
     -webkit-transition: all 0.5s;
     -moz-transition: all 0.5s;
     -o-transition: all 0.5s;
     transition: all 0.5s;
   }
   .container span{
     position: relative;
     display: inline-block;
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
   }
   .container:hover span{
     padding-right: 2rem;
   }
   .container:hover span::after{
     opacity: 1;
     right: 0;
   }
   span::after{
     content: '>>';
     position: absolute;
     top: 0;
     right: -2.5rem;
     opacity: 0;
     color: #fff;
     font-size: 1.3rem;
     -webkit-transition: 0.5s;
     -moz-transition: 0.5s;
     -o-transition: 0.5s;
     transition: 0.5s;
   }
   </style>
   

具体的内容可以去官网看看，文档介绍的很详细