标签：vue 封装 searchList value selectFunc props 组件 数据

封装组件的步骤

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

 

标签：vue,封装,searchList,value,selectFunc,props,组件,数据
来源： https://www.cnblogs.com/ljs201108/p/16264262.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。