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>
#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. 在子组件标签上绑定对自定义事件对数据进行监听

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