vue2-页面之间传值01-父子之间传值（前端面试必面题之一）

---

前言

前端开发注重组件化开发，使得代码逻辑更清晰，大大降低单个文件的代码量，使得代码可读性和可维护性更高。那么，组件化后，一个前端页面由多个组件组成，父子组件、兄弟组件之间使用同一个数据的场景非常多，而且如果抽取一个组件之后居然没用使用其他组件的值那就没意思了（哈哈哈），而且也是前端面试的一大必面题之一。最后就是组件之间的传值真的很重要 (≧∇≦)/ ！接下来，代码伺候：
———— 记得点赞、收藏、关注 ————

---

一、父传子

父组件向子组件传值是使用的最多的吧，大概：

1.使用props属性传值

使用方法：
父组件内, 引入用子组件,添加自定义属性方式给子组件的props变量传值
子组件内, 通过props接收变量, 在子组件使用变量
props可静态传递或者动态传递，取决于你传的值是否变化，绝大多数是变化的
静态：传递的参数固定，不会发生变化

<div class="right">
   <!-- 子组件1 -->
   <TeamRank codes="123456"/>
</div>

我这边使用的是动态传参

父组件：

<div class="right">
   <!-- 子组件1 -->
   <TeamRank :codes="codes"/>
   <div class="tow">
     <!-- 子组件2 -->
     <VolunteerRank :codes="codes"/>
   </div>
</div>

import VolunteerRank from "./VolunteerRank";//组件
import TeamRank from "./TeamRank";//组件

components: {
    VolunteerRank,
    TeamRank,
  },

  data() {
    return {
      codes: [],
    };
  },

子组件：

export default {
  props: {
    codes: {
      type: Array,//验证类型，传入值必须符合这个类型，否则报错
      default: [],//设置默认值，如果传值为空，使用这个 (`null` 和 `undefined` 会通过任何类型验证)
    },
  },
}

子组件中使用就直接用this.codes就可以了，上面使用的是动态传参以对象方式接收，还可以使用数组形式接收。

props: ['codes']

正常使用上面就可以了，如果需要跟详细的参考vue官方网站：https://cn.vuejs.org/v2/guide/components-props.html
更多验证：

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

1.2单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
如果需要在子组件中改变prop加以使用：
1、最好定义一个本地的 data 并将这个 prop 用作其初始值

props: ['initialCounter'],
data () {
  return {
    counter: this.initialCounter
  }
}

2、这个 prop 以一种原始的值传入且需要进行转换

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

！！！注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

2.通过$parent

$parent 可以用来从一个子组件访问父组件的实例，它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。

注意：在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

使用方法：
子组件，通过this.$parent获取到 父组件的值或者方法 并可以直接对其值进行修改或对其方法直接调用
子组件HTML：

<span class="iconplace" @click="deonBtn">
  <i class="el-icon-close"></i>
</span>

子组件中js：

method:{
	deonBtn() {
      //关闭弹框按钮
      this.$parent.openFlag = false;
    }
}   

父组件中HTML：

<RegionSelection
      :showModeltext="showModel"
      :openFlag="openFlag"
      :titleName="titleName"
    />

可以实现修改父组件的值，关闭弹框，实现效果：

二、子传父

子组件向父组件传值也是很常用的，一般：

1.通过自定义事件$emit传值

注意事项：
传值时候自定义的事件名称和v-on监听使用的事件名称完全一致。
此方法就是在子组件中自定义一个事件，在父组件中的子组件上使用v-on事件监听器监听该事件
使用方法：
在子组件中自定义一个事件
在父组件中的子组件上使用v-on事件监听器监听该事件

子组件中HTML：

<span class="iconplace" @click="deonBtn">
  <i class="el-icon-close"></i>
</span>

子组件中js：

method:{
	deonBtn() {
      //关闭弹框按钮
      this.showModel = false;
      this.$emit("regionSelectSay", this.showModel);
    }
}   

父组件中HTML：

<RegionSelection
      :showModeltext="showModel"
      :openFlag="openFlag"
      :titleName="titleName"
      @regionSelectSay="regionSelectSay"
    />

父组件中JS：

method:{
	regionSelectSay(data) {
	//这里data就是子组件传的值
      if (!data) {
        this.showModel = false;
      }
    },
}  

实现效果：

---

持续更新中-----