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

原创已于 2024-05-22 15:11:52 修改 · 1.2w 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-20 17:02:25 首次发布

Vuejs 同时被 2 个专栏收录

48 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

本文介绍了在Vue中如何使用ref属性从父组件调用子组件的方法，以及通过自定义事件实现子组件调用父组件的方法。两种方式分别展示了在常规<script>和<script setup>语法下的实践例子，强调了在<script setup>中使用defineExpose和defineEmits来暴露组件方法和事件。

写法1

父组件通过为子组件绑定ref属性调用子组件的方法

父组件的内容

<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>

子组件的内容

<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>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eOEed4gH-1658307849413)(C:\Users\zll\AppData\Roaming\Typora\typora-user-images\1658306031165.png)]$

父组件通过自定义事件，子组件通过emit调用父组件的方法

父组件的内容

<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 = (data) => {
      count.value++
      console.log(data) // 接受子组件传递过来的值
    }

    return {
      count,
      touchEvent
    }
  }
}
</script>

子组件的内容

<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');
      ctx.emit('parentEvent', '向父组件传递的值') //可以向父组件传值
    }

    return {
      parentEvent
    }
  }
}
</script>

在这里插入图片描述

写法2

使用 <script setup> 的组件是默认关闭的，即通过模板 ref 或者 $parent 获取到组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏，同样必须使用 defineProps 和 defineEmits API来声明props 和 emit。

父组件通过为子组件绑定ref属性调用子组件的方法
2.1 父组件的内容

<template>
  <div class="container">
    <childComponent ref="childRef"></childComponent>
    <el-button type="primary" size="default" @click="touchEvent">点击触发子组件方法</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import childComponent from '../components/childComponent.vue'

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

</script>

2.2 子组件的内容

子组件的方法使用defineExpose暴露出来

<template>
  <div class="container">
    <div>
      <span>父组件触发了{{ count }}次子组件的方法</span>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

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

defineExpose({ firstEvent })
</script>

子组件通过emit调用父组件的方法

2.1 父组件的内容

<template>
  <div class="container">
    <span>子组件调用了{{ count }}次父组件的方法</span>
    <childComponent @parentEvent="touchEvent"></childComponent>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import childComponent from '../components/childComponent.vue'

const count = ref(0)
const touchEvent = (data) => {
  console.log(data) //data接收子组件传过来的值 user: {...}
  count.value++
}
</script>

2.2 子组件的内容

子组件的方法使用defineEmits暴露出来

<template>
  <div class="container">
    <el-button type="primary" size="default" @click="parentEvent">点击触发父组件方法</el-button>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
const user = {
	name: '小明',
	age: 25,
}
const emit = defineEmits([ "parentEvent" ]);
const parentEvent = () => {
  // 传递user到父组件
  emit('parentEvent', user);
}
</script>