vue组件的封装

封装组件的步骤

　　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中的变量承接做数据的再处理。至于原因，同上，可以看一下js的原型。至于原理嘛，不懂的可以取脑补一下 js的原型 。　　　　

　　　　以上就是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 调用他，并传递参数。达到修改的目的。