Vue3 子父组件传值

在 vue3 的子父组件通信与 vue2 略有不同，通过下面代码我们看一下 vue3 和 vue2 组件通信中的不同。

//父组件
<template>
  <div>父组件：<input v-model="fatherInput"/></div>
  <div>父组件接收子组件：{{passNum}}</div>
  <son :fatherNum="fatherInput" @passValue="setValue" />
</template>

<script setup>
import { ref } from "vue";
import son from "./components/son/index.vue"; //注册子组件

const fatherInput = ref(0); //父组件中 input 绑定的变量
const passNum = ref(0); //接收子组件传过来的变量

//通过监听子组件 passValue 触发，并接收子组件传参并赋值给 passNum
const setValue = (val) => {
  passNum.value = val;
};
</script>

在父组件给子组件传值与 vue2 基本相同

//子组件
<template>
  <div>
    <div>子组件：<input @input="inputValue" v-model="sonInput"/></div>
    <div>子组件接收父组件 ：{{fatherNum}}</div>
  </div>
</template>

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

// vue3 中通过 defineProps 来接收父组件给子组件的传值
const  porps = defineProps({
  fatherNum:{
    type:Number,
    default:0
  }
});

// vue3 中通过 defineEmits 定义监听的方法
const emit = defineEmits(['passValue'])

const sonInput = ref(''); //子组件中 input 绑定的变量

//input 值发生改变时触发此事件并传参给父组件
const inputValue = () => {
  emit('passValue',sonInput.value);
};
</script>

通过上面代码可以看到在子组件接收父组件的传值时需要使用 defineProps 来定义 props、在调用父组件中的方法时也需要通过 defineEmits 来定义父组件所监听的方法。