vue3 父子组件之间的方法调用

vue3 父子组件之间的方法调用
写法1

父组件通过为子组件绑定ref属性调用子组件的方法
1. 父组件的内容
```
<template>
  <div class="container">
    <childComponent ref="childRef">childComponent>
    <el-button type="primary" size="default" @click="touchEvent">点击触发子组件方法el-button>
  div>
template>

<script>
import { ref } from 'vue'
import childComponent from '../components/childComponent.vue'

export default {
  components: {
    childComponent
  },

  setup() {
    const childRef = ref(null)

    const touchEvent = () => {
      childRef.value.firstEvent()
    }

    return {
      childRef,
      touchEvent
    }
  }
}
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
```
1. 子组件的内容
```
<template>
  <div class="container">
    <div>
      <span>父组件触发了{{ count }}次子组件的方法span>
    div>
  div>
template>

<script>
import { ref } from 'vue'

export default {
  setup() {

    const count = ref(0)

    const firstEvent = () => {
      count.value++
    }

    return {
      count,
      firstEvent
    }
  }
}
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
```
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOEed4gH-1658307849413)(C:\Users\zll\AppData\Roaming\Typora\typora-user-images\1658306031165.png)]$

子组件通过emit调用父组件的方法
1. 父组件的内容
```
<template>
  <div class="container">
    <span>子组件调用了{{ count }}次父组件的方法span>
    <childComponent @parentEvent="touchEvent">childComponent>
  div>
template>

<script>
import { ref } from 'vue'
import childComponent from '../components/childComponent.vue'

export default {
  components: {
    childComponent
  },
  setup() {
    const count = ref(0)

    const touchEvent = () => {
      count.value++
    }

    return {
      count,
      touchEvent
    }
  }
}
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
```
1. 子组件的内容
```
<template>
  <div class="container">
    <el-button type="primary" size="default" @click="parentEvent">点击触发父组件方法el-button>
  div>
template>

<script>
import { ref } from 'vue'

export default {
  setup(props, ctx) {
    console.log(props, ctx);
    const parentEvent = () => {
      ctx.emit('parentEvent');
    }

    return {
      parentEvent
    }
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
写法2

使用

写法1

写法2