vue父子组件如何传值呢？我们一起了解一下吧！
父子组件就是在一个vue文件中引入另一个vue文件，被引入vue文件就是子组件，引入vue文件的vue文件就是父组件。以下是父子组件传值的具体操作。
1.父向子传值props
父组件：<child :inputName="name">
子组件：
（1）props: {
inputName: String,
required: true
}
（2）props: ["inputName"]
2.子组件向父组件传值$emit
子组件:
<span>{{childValue}}</span>
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
export default {
data () {
return {
childValue: '我是子组件的数据'
}
},
methods: {
childClick () {
this.$emit('childByValue', this.childValue)
}
}
}
关于父子组件传值，我们就分享到这啦！
vue实战027:子组件和父组件之间传值详解
最近接了个新项目，更新可能会慢点了。。。今天继续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>#JavaScriptimport 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>#JavaScriptimport Select from '@/components/back/select' data(){ return{ articalList:'', } },components:{ Select,}, methods:{ getList(data){ this.articalList=data } }父子组件相互传值总结
父组件向子组件传值
子组件向父组件传值
欢迎关注本人的公众号：编程手札，文章也会在公众号更新
