开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情

说点题外话

上两篇说了父子组件通信：包括props传参和非props传参

和Vue3和解的Day11--父子组件通信

和Vue3和解的Day12--父子组件通信

这一篇说说父子组件中的子组件给父组件传参，这一篇详细说说在vue2也就是选项式中的写法，为下一篇组合式写法做铺垫。

说正文

子组件向父组件传参在选项式中写法

1. 基本使用

首先明确一点，子组件不能直接给父组件传参，需要我们在子组件上绑定一个方法，在选项式中通过$emit方法给父组件传递一个方法，在父组件中通过调用这个方法。

这里以计数器为案例

父组件Father.vue

<template>
  <div>
    <son :counter="counter" @increment="increment"></son>
  </div>
</template>

<script>
import Son from './Son.vue';
export default {
  data() {
    return {
      counter: 10
    }
  },
  components: { Son },
  methods: {
    increment() {
      this.counter++
    }
  }
}
</script>

子组件Son.vue

<template>
    <h2>{{ counter }}</h2>
    <button @click="addCounter">+1</button>
</template>

<script>
export default {
  props: ["counter"],
  methods: {
    addCounter() {
      this.$emit("increment")
    }
  }
}
</script>

此时我们完成了最基本的子组件中的方法，在父组件引用子组件之后可以触发方法，那么如何传递我们想要传递的参数呢？

2. 子组件给父组件传递参数

先知道一个前提，我们满传递参数的时候可以传递任意类型的参数，这里所有的传递方法我们写在一起对比着看

父组件Father.vue

<template>
  <div>
    <son @transmit="transmit"></son>
  </div>
</template>

<script>
import Son from './Son.vue';
export default {
  components: { Son },
  methods: {
    transmit(params) {
      console.log(params);
    }
  }
}
</script>

子组件Son.vue

<template>
  <button @click="transmit">传递参数的类型</button>
</template>

<script>
export default {
  methods: {
    transmit() {
      this.$emit("transmit", 10)
      this.$emit("transmit", "字符串")
      this.$emit("transmit", [1, 2])
      this.$emit("transmit", { name: "小白" })
    }
  }
}
</script>

这里我们会发现，我们常说js代码后面的会顶替掉前面的代码，但是这里我们很明显的发现，我们通过$emit传递的四个方法，都成功将参数传递过去了，并且四个参数类型都不相同。

3. 补充知识点：修饰符

如果我们想要父组件引用子组件之后在传值的时候也加上一个类型，不同于props里面的限制，这里可以直接对类型进行转化, 这就需要我们在子组件使用一个新的东西修饰符：v-modle.number, 这就是一个强制转换为Number类型的修饰符

这里实现一个输入框对数据强制转换为数字的案例

<template>
  <input v-model.number="counter">
  <button @click="typeofClick">判断类型</button>
</template>

<script>
export default {
  data() {
    return {
      counter: "100"
    }
  },
  methods: {
    typeofClick() {
      console.log(typeof this.counter);
    }
  }
}
</script>

这个案例我们会发现，变量counter初始变量我们设置的是string类型，在我们改变初始值之后类型就会因为修饰符强制转变为Number类型了

说再见

这一篇就不说太多知识点了，多了也记不住，vue2目前来说用的还是比较多的，大部分公司项目还都是vue2没有审核及Vue3，所以vue2一定是先研究通透了

难忘今宵

一个猎人开枪打了一只狐狸，然后猎人死了。狐狸说哈哈哈，我是反射狐。

和Vue3和解的Day13--父子组件通信