前端开发：组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用

前言

在前端开发的时候，处理数据、传递数据是非常常用的操作方式，也是前端开发工作中非常重要的部分。尤其是在前端开发过程中的组件之间的数据传递，是必用操作。那么本篇博文就来分享一下在前端开发的时候，对于在使用组件的时候进行数据传递处理的操作使用。

首先来了解一下在前端Vue开发过程中常用的组件之间的传值场景，有三种：父组件传值到子组件、子组件传值到父组件、兄弟组件之间的传值。其他延伸的组件之间的传值场景：孙子组件传值给爷爷组件、祖父组件传值给曾孙组件等等隔代关系传值，这些跨三级以上的组件的传值延伸情景，其实还是常用的三种传值的结合使用，这里就不再多说，只要掌握常用的三种传值方式就可应对各种变种延伸的情景。

一、父组件传值到子组件

通过父组件传值到子组件，其实就是把父组件的数据传递到子组件中并进行对应的业务操作，因为父组件中的数据如果不通过数据传值操作子组件是无法直接使用的。具体的父组件传值到子组件的使用如下所示：

定义一个数据源：fruits:[“Apple”,”Banana”,”Cherry”];  //把这个数组的数据从父组件传递到子组件中

1、父组件的写法

<template>

  <div id="app">

    <users v-bind:fruits="fruits”></users>  //前一个自定义名称便于子组件调用，后面的是要传递数据名，这里的v-bind可以省略不写

  </div>

</template>

<script>

import Fruits from "./components/Fruits”

export default {

  name: