子组件派发事件和值给父组件

子组件通过$emit派发事件和值给父组件（值可以有多个）

this.$emit('fnX', value)

父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值

<ComponentName @fnX="fnY"></ComponentName>

methods: {
  fnY(value) {
    console.log(value)
  }
}

1
2
3
4
5
6
7

# 父子组件间传递数据 demo

<div id="root">
  <counter :count="0" @change="handleChange"></counter> +
  <counter :count="1" @change="handleChange"></counter> = <span>{{total}}</span>
</div>

<script>
const counter = {
  props: ['count'], // 接收父组件传来的值
  data() {
    return {
      number: this.count // 拷贝prop值的副本，用于修改
    }
  },
  template: '<button @click="handleClick()">{{number}}</button>',
  methods: {
    handleClick() {
      this.number++ // 由于单向数据流，不能直接修改prop的值
      this.$emit('change', 1) // 派发事件并传出值，值可以有多个
    }
  }
}
const vm = new Vue({
  el: '#root',
  data: {
   total: 1
  },
  components: {
    counter
  },
  methods: {
    handleChange(step) {
      // step 子组件传来的值
      this.total += + step
    }
  }
})
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

编辑

#Vue

上次更新: 2023/03/08, 02:53:55

← 父组件给子组件传值 Prop验证与非Prop的Attribute→