Vue3在setup语法糖下的父子组件传值

---

前言

• vue版本大于>3.2
• 使用setup语法糖

---

一、前期准备

setup介绍

二、初始化项目

• vue/cli脚手架初始化vue3项目
• components下新建子组件child.vue
• App.vue父组件引入子组件child.vue

1.父组件传值给子组件

代码如下：
父组件App.vue：

<Child :num="12" name="武林外传"></Child>

子组件child.vue：

//定义接收属性
import {
    
     defineProps } from "vue";
// 定义从父组件接收的属性
const props = defineProps({
    
    
  num: Number,
  name: String,
});
//template显示：
 <div>收到父组件的值：{
    
    {
    
     props.num }},{
    
    {
    
     props.name }}</div>

结果：

2.子组件传值给父组件

代码如下（示例）：
child.vue:

// 定义触发事件,向父组件传值
import {
    
     defineEmits } from "vue";
const emits = defineEmits(["emit1", "emit2"]);
//创建两个button事件，用于触发发送事件
<button @click="add1">发送数据一给父组件</button>
<button @click="add2">发送数据二给父组件</button>
//各自对应的触发方法
  const add1 = () => {
    
    
  emits("emit1", 1);//点击add1则触发了事件emit1,同时携带参数‘1’给接收emit1事件的父组件
};
  const add2 = () => {
    
    
  emits("emit2", 2);//点击add2则触发了事件emit2,同时携带参数‘2’给接收emit1事件的父组件
};

父组件App.vue:

   <Child @emit1="receive1" @emit2="receive2"></Child>
   //定义用于接收emit1和emit2触发事件的方法
   const receive1 = (e) => {
    
    
   console.log("收到从子组件addNum传来的：", e);
};
   const receive2 = (e) => {
    
    
   console.log("收到从子组件chuyi传来的：", e);
};

点击查看结果：

3.完整代码

子组件child.vue:

<template>
  <div>
    <div>收到父组件的值：{
    
    {
    
     props.num }},{
    
    {
    
     props.name }}</div>
    <button @click="add1">发送数据一给父组件</button>
    <br />
    <button @click="add2">发送数据二给父组件</button>
  </div>
</template>

<script setup>
import {
    
     defineProps, defineEmits } from "vue";

// 定义触发事件,向父组件传值
const emits = defineEmits(["emit1", "emit2"]);

// 定义从父组件接收的属性
const props = defineProps({
    
    
  num: Number,
  name: String,
});
// console.log(props);
// 子组件向父组件传递参数 触发父组件的addNum方法，同时传入参数2；通过注册emits，同时触发对应的方法名，传入参数
const add1 = () => {
    
    
  emits("emit1", 1);
};
const add2 = () => {
    
    
  emits("emit2", 2);
};
</script>

父组件App.vue:

<template>
  <!--可以没有根标签 div -->
  <div class="c">
    <Child @emit1="receive1" @emit2="receive2" :num='num' name="武林外传"></Child>
  </div>
</template>

<script setup>
import Child from "./components/child.vue";
import {
    
     ref } from "vue";
const num = ref(12);
const receive1 = (e) => {
    
    
  console.log("收到从子组件addNum传来的：", e);
  num.value *= e;
};
const receive2 = (e) => {
    
    
  console.log("收到从子组件chuyi传来的：", e);
  num.value /= e;
};
</script>
<style scope>
</style>

---

总结

简单记录Vue3在setup语法糖下的父子组件传值