Vue组件化开发

Vue精髓–组件化

---

1.组件化理解：把前端页面大体分为几个部分，每部分为一个组件，组件可以单独写出来，然后每个页面去调用。对应后端开发的“类”思想，使用的时候去调用传参即可.

2.组件化举例：

（1）创建组件：
在vue项目中，组件一般放在src的components文件夹下，如下：

组件中封装公共代码，把需要传的值放在props数组里边，如下为adapt.js组件内容

<template>
    <div class='adapt'>
        <h3>适应场景</h3>
         <el-tabs  @tab-click="handleClick">
            <el-tab-pane v-for="item in adaptlist" :key='item.index' :label='item.name'>
                <div class='game'>
                    <div class='pho'>
                      <img class="topImg" :src="item.src1"  alt="" />
                    </div>
                    <div class='mes'>
                       <ul>
                        <li class='mesul'>
                          <img :src="item.src2">
                          <div class='mes1'>
                            <h4>{{item.title1}}</h4>
                            <p>{{item.mes1}}</p>
                          </div>
                          <div class='clear'></div>
                          </li>
                        <li class='mesul1'>
                          <img :src="item.src3">
                          <div class='mes11'>
                            <h4>{{item.title2}}</h4>
                            <p>{{item.mes2}}</p>
                          </div>
                          <div class='clear'></div>
                        </li>
                      </ul>
                    </div>
                    <div class='clear'></div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
export default ({
    name: 'adapt',
    data() {
    return {
    };
  },
     props: ['adaptlist'],
     methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
  },
    mounted() {
    var wow = new WOW({
      boxClass: 'wow',
      animateClass: 'animated',
      offset: 0,
      mobile: true,
      live: true
    })
    wow.init();
  }
})
</script>

需要传递的参数为：activeName, adaptlist
把这两个参数放在props里边（此处为vue的传值方式之一）：

 props: [ 'adaptlist'],

（2）注册组件

在main.js中注册（也可以局部注册，使用时在需要引用的页面注册）

/* 适用场景 */
import adapt from './components/adapt'
Vue.component(adapt.name, adapt)

此时adapt.name为adapt组件中name参数值，如下所示：

(3)组件引用及传值

1）全局注册时，直接在需要加入组件的页面引入组件即可，如下在此页面引入adapt组件：

需要传递的值直接用以下方式传递：

:adaptlist = 'adaptlist'

此时"="前的adaptlist表示传递参数名，即在adapt.js页面中props里边的参数值，
“=”后的adaptlist为引用adapt页面里需要传递的值，在此页面的data或methods中赋值即可，如下所示。