Vue使用函数组件和JSX语法封装组件

Vue使用函数组件和JSX语法封装组件

在介绍之前，先说一下使用场景，仅仅用于简化代码，降低无用的引用以及耦合度，并不是要代替什么，大佬不要抬杠。

有3种不同的列表，分别为

List01.vue

List02.vue

List03.vue

对应的样式如下：

按照我们平时的使用方法，如果需要在不同的组件使用，则需要如下引入方式，想想如果List组件特别多，有几十个呢....

import List01 from "./List01.vue"
import List02 from "./List02.vue"
import List03 from "./List03.vue"

现在在我们简化一下使用方式，降低重复引用的次数，思路很简单：

1. 建立一个index.js文件,作为入口
2. 使如果有其他组件使用上述3个List的话，只需要引入这个入口文件,
3. 然后传入List的类型和数据即可

思路打通，开始实现

1.建立入库文件index.js

这里用到了Vue的渲染函数和Vue.component()，不懂的可以参考这里Vue渲染函数的使用

//1引入Vue和组件
import Vue from 'vue'
import List01 from "./List01.vue"
import List02 from "./List02.vue"
import List03 from "./List03.vue"

Vue.component('List',{
  data(){
    return{
      
    }
  },

  props:{ //2规定props，包括List的类型和数据
    kind:{
      type:String,
      required:true,
      default:()=>{""}
    },
    
    settings:{
      type:Object,
      required:true,
      default:()=>{}
    }
  },
  
  render() {
    //3根据类型返回不同的组件，并将数据传入
    const {kind,settings}=this;
    
    let List=<div></div>
    switch(kind){
      case"L01":
        List=<List01 settings={settings}/>
        break;
      case"L02":
        List=<List02 settings={settings}/>
        break;
      case"L03":
       List=<List03 settings={settings}/>
        break;
      default:
        return <div></div>
    }

    return List  //4返回List组件
  }
  
})

2.List子组的定义

3个List组件内容差不多，不同的在于背景色和名称，关于里面的settings数据，下面会讲到

<template>
  <div class="box" @click="onItemClick(settings.clickFunc,settings)">{{settings.name}}--{{settings.age}}--{{settings.addr}}</div>
</template>

<script>
  
  export default{
    name:"List01",
    props:{
      settings:{
        type:Object,
        equired:true,
        default:()=>{}
      }
    },
    data(){
      return{
        
      }
    },
    
    methods:{
      onItemClick(func,settings){
        if(func && settings){
          alert(`${settings.name}--${settings.age}--${settings.addr}`)
          return false;
        }
      }
    }
  }
  
</script>

<style scoped="scoped">
  .box{
    width: 500px;
    height: 50px;
    background-color: #DC4D41;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius:9px;
    margin:10px;
  }
</style>

3.实际使用

在App.vue中引入index.js，注意，不是作为组件引入，也不是作为有名字的模块引入，是直接引入js文件

import  './components/List/index.js'

因为index.js的返回结果本身就是一个组件

然后在App.vue中定义一些数据

  
  data(){
    return {
      users:[
       {
         name:"皮卡丘",
         age:23,
         addr:"中国-江苏-苏州",
         clickFunc:function(arg){
           alert(arg)
         }
       },
       {
         name:"可达鸭",
         age:22,
         addr:"中国-安徽-安庆",
         clickFunc:function(arg){
           alert(arg)
         }
       },
       {
         name:"暴龙兽",
         age:21,
         addr:"中国-广东-广州",
         clickFunc:function(arg){
           alert(arg)
         }
       },
      ]
    }
  }

接着就可以使用List，只需要传入kind(类型)  和 settings(数据)

<template>
  <div id="app">
    <div v-for="(item,index) in users" :key="index+new Date()">
      <List kind="L03" :settings="item"> </List>
    </div>
  </div>
</template>

然后，就如上述第2步，3个List子组件里可以使用数据

//List01 || List02 || List03
<template>
  <div class="box" @click="onItemClick(settings.clickFunc,settings)">{{settings.name}}--{{settings.age}}--{{settings.addr}}</div>
</template>

最后，假如我们的组件特别多，比如

List01.vue
List02.vue
...
List23.vue

而且都要从频繁的在同一个页面使用，上面的方法就特别好用简洁，只需要在入口引入一次，没必要在每个使用的地方都 improt一大串了