Vue3 setup风格父子组件多种传参和回调方式（亲测手写锦集）

本文章是以Vue3 script setup的方式组件之间多种传参方式的演示代码。

1、父组件向子组件传参，子组件向父组件回调

最常用的方式，缺点是单向的子组件不能直接向父组件回写，通过回调实现。

<template>
  <div style="background-color: #20a0ff;text-align: center;padding: 10px;">
    <h1>父页组件</h1>
    名称：{{name}}
    <!--子组件，定义updateName事件-->
    <Son :id="id" :name="name" :data="data" @updateName="updateName"></Son>
  </div>
</template>
<script setup>
import Son from "./son"
//定义要传到子组件的参数
const id = ref("ID123456");
const name = ref("张三");
const data = ref({name: '张三', sex: "男"});

function updateName(val) {
  name.value = val;
  data.value.name = val;
}
</script>

子组件

<template>
  <div style="background-color: #79bbff;padding: 10px;">
    <h2>子页组件</h2>
    参数<br>
    {{ props.id }}<br>
    {{ props.name }}<br>
    {{ props.data }}
    <button @click="onclick('李四')">改成李四</button>
  </div>
</template>
<script setup>

const {proxy} = getCurrentInstance();
//定义父组件可以传进来的参数，限制传进来的参数类型，也可以不设置
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  name,
  data: {
    type: Object,
    default: {}
  },
})

function onclick(name) {
  //触发组件updateName事件，并传参
  proxy.$emit("updateName", name);
}
</script>

2、子组件向父组件双向绑定

按业务需求父组件要获取子组件修改的值时常用

<template>
  <div style="background-color: #20a0ff;text-align: center;padding: 10px;">
    <h1>父页组件</h1>
    名称：{{name}}
    <!--子组件-->
    <Son v-model:name="name"></Son>
  </div>
</template>
<script setup>
import Son from "./son"
//定义要传到子组件的参数
const name = ref("张三");
</script>

<template>
  <div style="background-color: #79bbff;padding: 10px;">
    <h2>子页组件</h2>
    参数<br>
    <input v-model="name2">
  </div>
</template>
<script setup>
//定义父组件可以传进来的参数，限制传进来的参数类型，也可以不设置
const props = defineProps({
  name: {
    type: String,
    default: ''
  },
})

//计算属性，当值修改时更新父页面的属性值
const emit = defineEmits();
const name2 = computed({
  get() {
    return props.name
  },
  set(val) {
    emit('update:name', val)
  }
})
</script>

3、父传子、子传孙、各种传参，可以是任意层级

通过 provide(‘name’, name); 向全局设置参数
通过 inject(‘name’); 获取全局中的参数
缺点：可能会有命名冲突问题，按业务需求使用

<template>
  <div style="background-color: #20a0ff;text-align: center;padding: 10px;">
    <h1>父页面</h1>
    名称：{{ name }}
    <!--子组件-->
    <Son v-model:name="name"></Son>
  </div>
</template>
<script setup>
import Son from "./son"
import {provide} from "vue";
//定义要传到子组件的参数
const name = ref("张三");
provide('name', name)
</script>

<template>
  <div style="background-color: #79bbff;padding: 10px;">
    <h2>子页组件</h2>
    参数<br>
    <input v-model="name">
    <Grandson></Grandson>
  </div>
</template>
<script setup>
import Grandson from "./grandson"
import {inject} from "vue";

const name = inject('name');
</script>

<template>
  <div style="background-color: #337ecc;padding: 10px;">
    <h2>孙子页组件</h2>
    参数<br>
    <input v-model="name">
  </div>
</template>
<script setup>
import {inject} from "vue";

const name = inject('name');
</script>

4、子组件向父组件传值、传函数，单向

通过defineExpose对外暴露子组件中的变量和函数

<template>
  <div style="background-color: #20a0ff;text-align: center;padding: 10px;">
    <h1>父页组件</h1>
    data：{{data}}<br>
    <button @click="onclick">调用子页面的函数</button>
    <!--子组件，定义updateName事件-->
    <Son ref="data"></Son>
  </div>
</template>
<script setup>
import { ref ,nextTick} from 'vue';
import Son from "./son"
//定义要传到子组件的参数
const data = ref({});

nextTick(()=>{
  console.log("data",data.value)
})

function onclick(){
//调用子页面的函数
  data.value.method();
}
</script>

<template>
  <div style="background-color: #79bbff;padding: 10px;">
    <h2>子页组件</h2>
    参数<br>
    {{name}}<br>
    <button @click="onclick('李四')">改成李四</button>
  </div>
</template>
<script setup>
const name = ref('李四')
const method= () => {
  console.log("我是子组件的方法")
  name.value="王五"
}
defineExpose({
  name,
  method
})

function onclick(val) {
  name.value = val;
}
</script>

求关注~~~

点关注不迷路，喜欢的朋友们关注支持一下
给点继续写的动力，感谢！！