在什么情况下子组件需要传递给父组件?
当我子组件需要发生一些事件,例如: 点击事件 ,在子组件发生了点击事件执行了一个方法,而父组件内需要内容改变
我们怎么做,怎么完成才能完成上面的操作呢?
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>