vue2.0根据需求封装自定义组件

一、封装组件的步骤

1.  建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑。

2.  准备好组件的数据输入。即分析好逻辑，定好 props 里面的数据、类型。

3.  准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法。

4.  封装完，调用。

 

二、代码详解

1. 先说一下 props

我们在父组件中需要将子组件需要的数据导入，用法如下：

<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

:searchList="searchList"  就是我们的数据，这个可以写多个。这里我传输了2个参数过去，主要是做数据修改的说明。

在子组件中，我们的接收和使用方法如下：

props: {
      searchList: Array,
      selectValue: Object
},
mounted() {
      this.data = this.searchList
},

我们在 props 中接收数据，注意props对象里面 键值 是对改数据的 数据类型 的规定。做了规范，使用者就只能传输指定类型的数据，否则报警告

而props对象中的数据，我们可以直接在当前组件中使用  this.searchList，可以直接使用。这里要强调一下，props传过来的数据只做展示，不得修改，想修改，再新写一个data中的变量承接做数据的再处理。

 

2. emit的使用(如何暴露组件方法)

我们已经会使用 父组件向子组件传数据了，那如子组件如何来修改父组件的数据呢？

这里提供 2 种实现方法，但是第一种不推荐

方式一：

selectValue: {
    data: '1'
},
 。。。。。。。。。。。。。。。

this.selectValue.data = '我被修改了'

即，父组件将 对象 数据传递给子组件，子组件直接修改props过来的对象的值

可以实现，是一个比较快捷的方式。但这种方式写多了，容易出错，当多层组件嵌套的时候。这种修改对代码的迭代和错误的捕捉都不友好。

他的实现原理简单提一下： 这个对象、数组是引用数据类型，存储单元的信息是指针，真正数据在别的地方，通过指针查询的数据，所以这样写，对浏览器来说仅仅是传递了一个指针，数据还是同一份数据。所以你能修改。

方式二：

正儿八经的通过 $emit 方法去掉父组件的方法，在父组件中修改data的数据。

// 子组件
this.$emit('selectFunc', value)
// 父组件
<search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>

selectFunc(value) {
　　this.selectValue2 = value
　　console.log(this.selectValue)
　　console.log(this.selectValue2)
}

将父组件的方法注入子组件  @selectFunc="selectFunc" ，然后在子组件中通过 $emit 调用他，并传递参数。达到修改的目的。

 

三、 demo代码

父组件：

 

<template>
    <section class="f-mainPage">
        <!--selectFunc 选择完成的回调      searchList 下拉列表的数据-->
        <search @selectFunc="selectFunc" :searchList="searchList" :selectValue="selectValue"></search>
    </section>
</template>

<script type="text/ecmascript-6">
  import Search from '../vuePlugin/search'
  export default {
    data() {
      return {
        searchList: ['测试数据1', '测试数据2', '测试数据3'],
        // 直接通过props传递对象 修改，挺便捷的,但是不规范
        selectValue: {
          data: '1'
        },
        // 通过emit修改，规范写法
        selectValue2: ''
      }
    },
    mounted() {},
    methods: {
      pageGo(path) {
        this.$router.push('/' + path)
      },
      selectFunc(value) {
        this.selectValue2 = value
        console.log(this.selectValue)
        console.log(this.selectValue2)
      }
    },
    components: {
      Search
    }
  }
</script>

子组件：

<template>
    <div class="searchZJ">
      <div class="f-search">
          <div class="f-searchIn" v-bind:class="{searchInFous: this.fousFlag}">{{this.searchValue}}<span v-bind:class="{searchActive: this.searchFlag}" v-on:click="searchDown"></span></div>
          <div class="f-searchXl" v-if="this.dataHas" v-bind:style="{height:this.searchFous, border:this.searchBorder}">
              <div v-for="item in searchList" v-on:click="choseValue(item)">{{item}}</div>
          </div>
          <div class="f-searchXl" v-else >
              <div>暂无数据</div>
          </div>
      </div>
    </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        data: [],
        dataHas: true,
        searchFlag: false,
        searchFous: '0',
        fousFlag: false,
        searchValue: '',
        searchBorder: 'none'
      }
    },
    props: {
      searchList: Array,
      selectValue: Object
    },
    mounted() {
      this.data = this.searchList
    },
    methods: {
      searchDown() {
        this.searchFlag === false ? this.searchFlag = true : this.searchFlag = false
        this.searchFous === '0' ? this.searchFous = 'auto' : this.searchFous = '0'
        this.searchBorder === 'none' ? this.searchBorder = '1px solid #D9D9D9' : this.searchBorder = 'none'
        this.fousFlag === false ? this.fousFlag = true : this.fousFlag = false
      },
      choseValue(value) {
        this.searchValue = value
        this.searchDown()
        this.selectValue.data = '我被修改了'
        this.$emit('selectFunc', value)
      }
    }
  }
</script>

四、 总结

这里主要是总结一下vue组件封装的思路，和jQuery插件、react组件一样，所有组件都是一个套路，就是 函数思想。

1. 定义好 你需要使用者传入的数据

2. 定义好 你提供给使用者的方法

3. 写好组件的内部逻辑

这样一个完美的，可复用的组件就完成了。