子组件传递给父组件详解

在什么情况下子组件需要传递给父组件？

当我子组件需要发生一些事件，例如： 点击事件 ，在子组件发生了点击事件执行了一个方法，而父组件内需要内容改变

我们怎么做，怎么完成才能完成上面的操作呢？

1.我们需要在自己的子组件内创建一个点击事件

子组件内的事件 现在自己内部监听 监听完之后 我们需要用到一个 $emit 语法进行发射出自己定义的事件$emit（”事件名字“, 传入值的名字）， 之后再父组件内 添上  ：add = "父组件内的事件方法"

子组件文件： AddCounter.vue 

<template>

<button @click="btnClick(10)> {{count}}</button>

</template>

<script>
export defaullt{

methods: {
    btnClick(count) {
        this.$emit("number", count)
    }
}



</script>

父组件：App.vue 

<template>

<add-counter :add="btnClick">{{counter}}</add-counter>


</template>

<script>
import AppCounter from './components/AddCounter.vue'
export default{
    components: {
        AppCounter
  },
    data() {
        return {
            counter: 0

        }
}
    methods: {
         btnClick(count) {
            this.counter += count
        }
     }
}


</script>