vue父子组件的常用通信方式有哪些（vue实战027:父子组件通信详解）

vue父子组件的常用通信方式有哪些（vue实战027:父子组件通信详解）父组件向子组件传递数据的过程就是通过props来实现的，props的值可以是两种，一种是数组，一种是对象。在传递Array类型数据时，我们需要注意的是如果子组件接受的数据是props定义的default时，我们会遇到错误提示：<select class="yearSelect"> <option value="" style="display:none">年</option> //值为空，样式为隐藏 <option >不限</option> <option v-for="(year id) in yearList" :key="id">{{year}}</option> </select> props数组传递首先我先来创建一个子组件，通过时间、文章类型、个人分类或者关键词者用来筛选文章，这

最近接了个新项目，更新可能会慢点了。。。今天继续Vue实战开发系列

现在开始写文章列表展示功能，这里我把筛选这块进行了子组件封装，所以在进行搜索时我们需要从父级获取到文章的相关信息，如更新年月，文章类型及个人分类等等信息，当点击搜索时将搜索到的结果返回给父级列表展示，下面我模拟了些数据进行操作。

什么是组件

在vue中， 可以根据项目需求将大部分相同操作的模块定义成组件，通过组件我们可以减少代码的编写，提高代码的复用率，而且组件之间也可以进行数据通信，这样就大大提升了项目效率。通常父组件的模板中包含子组件，父组件会正向的向子组件传递当前所需的数据，子组件接受到数据后对数据进行渲染和执行操作。

父组件向子组件传递数据

定义子组件

首先我先来创建一个子组件，通过时间、文章类型、个人分类或者关键词者用来筛选文章，这些数据需要重父级组件获取，vue中我们可以通过props属性来获取父级的数据，在props中定义你需要的数据。

<template> <div class="select"> <div class="condition"> <label>筛选：</label> <select class="yearSelect"> <option >不限</option> <option v-for="(year id) in yearList" :key="id">{{year}}</option> </select> //...省略 <input type="text" placeholder="请输入标题关键词" v-model="keyword"> </div> <button @click="search">搜索</button> </div> </template> <script> export default { props:{ yearList:{ type:Array default:[] } //...省略 } } </script> <style scoped> //...省略 </style>

select选框提示定义

通常我们会在select中写个默认提示信息，如我这里默认显示了年、月等信息，这样用户体验更好，那么这个要怎么实现呢，select中没有input中的placeholder属性，所以这里我们需要来通过修改第一个option属性来实现select提示功能（将值设置为空，样式设置为隐藏）。

<select class="yearSelect"> <option value="" style="display:none">年</option> //值为空，样式为隐藏 <option >不限</option> <option v-for="(year id) in yearList" :key="id">{{year}}</option> </select>

props数组传递

父组件向子组件传递数据的过程就是通过props来实现的，props的值可以是两种，一种是数组，一种是对象。在传递Array类型数据时，我们需要注意的是如果子组件接受的数据是props定义的default时，我们会遇到错误提示：

这时因为props的 default 参数中，数组／对象的默认值相当于一个工厂函数返回，所以这里我们可以稍微的改动下，用箭头函数来定义default参数（这样就不会报错了）：

props:{ yearList:{ type:Array default:() =>[] } //...省略 }

在父组件中引入子组件

定义好了子组件，我们就需要将其引入到需要使用的父组件中去了，使用import引入组件然后在components声明该组件，数据通过v-bind动态绑定，:yearList="yearList"就是将父组件中的yearList赋给子组件中的yearList。

#template <Select :yearList="yearList"></Select> #JavaScript import Select from '@/components/back/select' components:{ Select } data(){ return{ yearList:['2019' '2018' '2017' '2016'] //...pass } } 子组件向父组件传递数据

子组件抛出数据

即然父组件可以想子组件传递数据，那么子组件当然也应该可以向父组件传递数据了，在子组件中向父组件传值可以使用this.$emit("function" param); //其中function为父组件定义函数，param为需要传递参数。给搜索按钮绑定点击事件，点击搜索按钮，将子组件模拟的数据artical传给父组件，然后在父组件展示。

<template> <div class="select"> //...pass <button @click="search">搜索</button> </div> </template> <script> export default { props:{ //...pass } data(){ return{ keyword:'' artical:['Django实战010：搭建图片服务器详解' 'Django实战009：文件上传实现过程详解' 'Django实战008：基于Token的验证使用' 'Django实战007：Cookie搭配Session使用' 'Django实战006：Cookie设置及跨域问题处理' 'Django实战005:注册加密及登陆验证问题' 'Django实战004:跨域请求问题解决' 'Django实战003:为什么使用Serializer序列化器' 'Django实战002:配置参数设置' 'Django实战001:开发环境搭建'] } } methods:{ search(){ this.$emit('articalList' this.artical) } } } </script> <style scoped> //...pass </style>

父组件监听数据

这里我定义了一个articalList，回到父组件，我们通过v-on来监听articalList，简写成@articalList="getList"，getList为父组件定义的函数--用于接收子组件传值并进行相应数据处理，你也可以直接定义articalList，方便后续查询对应。

#template <Select :yearList="yearList" @articalList="getList" ></Select> #JavaScript import Select from '@/components/back/select' data(){ return{ articalList:'' } } components:{ Select } methods:{ getList(data){ this.articalList=data } } 父子组件相互传值总结

父组件向子组件传值

1. 子组件在props中创建一个属性，用来接收父组件传过来的值
2. 父组件中注册子组件
3. 在子组件标签中绑定子组件props中创建的属性并将值赋给该属性

子组件向父组件传值

1. 子组件中通过事件触发
2. 将需要传的值通过$emit传给响应自定义事件的方法
3. 在子组件标签上绑定对自定义事件对数据进行监听

欢迎关注本人的公众号：编程手札，文章也会在公众号更新