vue 组建的封装与复用

封装一个简单的模糊搜索功能

父组件

=> 在父组件中进行引入
    import Seatch from "../commponent/seatch.vue"
=> 注册组件
    components: {
            Seatch,
            Btn
    }
=> 使用组件
      <template lang="pug">
       .box
             Seatch(:seatchData="seatchOneData")
       </template>
=> 组件数据
   data() {
      return {
        seatchOneData: {
          seatchDataList: ['aaa', 'bbb', 'ccc', 'ddd'],
          seatchData: ''
        },
        seatchTwoData: {
          seatchDataList: ['qqq', 'www', 'eee', 'rrr'],
          seatchData: ''
         },
         }
       }

子组件

=> template
 <template lang="pug">
      .box 
       input(type = "text" v-model="seatchData.seatchData")
        ul
         li(v-for="(item, index) in getDataList" :key="index") {{ item }} 
  </template>
 => props 接收父组件的传值
    props: {
       seatchData: {
         type: Object,
          // 保证其数据的唯一性
         default: function() {
           return {}
         }
     }
   }
 => 调用 方法
    computed: {
      getDataList() {
         const { seatchData, seatchDataList } = this.seatchData
            return seatchDataList.filter(item => item.indexOf(seatchData) > -1)
        }
    }