Vue3.2 父子组件传值、方法 快速上手

本文已参与「新人创作礼」活动，一起开启掘金创作之路

在Vue3.2 中父子组件传值、方法是通过defineProps, defineEmits实现的。defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的。 它们不需要导入就会随着 <script setup> 被一同处理编译。 defineProps 接收与 props 选项相同的值， defineEmits 也接收 emits 选项 相同的值。

父组件向子组件传值：

在Vue3.2 中父组件向子组件传值，需要使用defineProps。defineProps 接收与 props 相同的值。

首先，父组件通过自定义属性向子组件传递值：

<Subassembly :value="doc"/>

然后子组件从 vue 中引入defineProps

import { defineProps } from 'vue'

再声明接收的值const props = defineProps(['value'])

最后，就可以在子组件中使用父组件传递过来的值了

<h1>{{ props.value }}</h1>

代码示例

父组件代码：

<template>
  <div>
    <!-- 通过自定义属性传递值 -->
    <Subassembly :value="doc"/>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Subassembly from './Subassembly.vue'


// 待传递的值
const doc = ref('hello');

</script>

子组件代码：

<template>
  <div>
    <!-- 使用父组件传递过来的值 -->
    <h1>{{ props.value }}</h1>
  </div>
</template>
<script setup>
// 从 vue 中引入defineProps
import { defineProps } from 'vue'

// 接收父组件传递过来的值
const props = defineProps(['value'])

</script> 

子组件调用父组件方法：

在Vue中子组件不能直接向父组件传值，子组件需要调用父组件传递过来的方法，然后再父组件中通过方法修改值。

在Vue3.2 中子组件调用父组件方法，需要使用defineEmits。defineEmits 也接收 emits 相同的值。

首先，父组件通过自定义属性向子组件传递方法：

<Subassembly @func="sayHello" />

然后子组件从 vue 中引入 defineEmits

import { defineEmits } from 'vue'

再声明接收的方法const emit = defineEmits(['func'])

最后，通过emit('父组件传递过来的方法', '向该方法传递的参数')使用方法

emit('func', 'hello world')

代码示例

父组件代码：

<template>
  <div>
    <!-- 通过子组件自定义属性传递值、方法 -->
    <Subassembly :value="doc" @func="sayHello" />
    <button @click="sayHello(doc)">父组件按钮</button>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Subassembly from './Subassembly.vue'


// 待传递的值
const doc = ref('hello');

// 待传递的方法
const sayHello = function (data) {
  alert(data);
}
</script>

子组件代码：

<template>
  <div>
    <!-- 使用父组件传递过来的值 -->
    <h1>{{ props.value }}</h1>
    <button @click="handelClick">子组件按钮</button>
  </div>
</template>
<script setup>
// 从 vue 中引入defineProps, defineEmits
import { defineProps, defineEmits } from 'vue'

// 接收父组件传递过来的值
const props = defineProps(['value'])
// 接收父组件传递过来的方法
const emit = defineEmits(['func'])

const handelClick = function  () {
    //调用父组件传递过来的方法，传入参数修改父组件的值 
    emit('func', 'hello world')
}
</script>