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

Bertha 。 2024-03-26 16:01 4阅读 0赞

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

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

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

<template>
      <div style="background-color: #20a0ff;text-align: center;padding: 10px;">
        <h1>父页组件</h1>
        名称：{
       {name}}
        
        <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>
        
        <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>

## 求关注~~~ ##

<table> 
 <thead> 
  <tr> 
   <th>点关注不迷路，喜欢的朋友们关注支持一下</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>给点继续写的动力，感谢！！</td> 
  </tr> 
 </tbody> 
</table>