vue3组件传参

父组件向子组件传参

父组件向子组件传参主要通过props来实现

父组件

   <!-- message 传递字符串  info传递对象   list传递数组  对象数组类型需要动态绑定传递 -->
   <SonComponet  message="父组件向子组件传递一个字符串" :info="info" :list="list" />

import SonComponet from './components/SonComponet.vue';
<script setup>
import { ref} from 'vue'
const info=ref({
  name:'zs',
  age:12
})
const list=ref(['a','b','c'])
</script>

子组件SonComponet.vue

<template>
   <div>
      <div>message:{{ message }}</div>
      <div>message2:{{ message2 }}</div>
      <div>info: {{ info.name }} {{ info.age }}</div>
      <div>list: <span v-for="item in list" :key="item">{{ item }}</span></div>
   </div>
</template>

<script setup>
import {defineProps} from 'vue'
// 在子组件中使用 defineProps来定义接收props
 const props=defineProps({
    message:{
        // 接收的时候需要声明类型
        type:String,
    },
    message2:{
        type:String,
        // 可以设置默认值，如果没有传递message2，则会显示default的值
        default:'没有传递message2,这里显示default的默认值'
        
    },
    info:{
        // 声明 对象
        type:Object
    },
    list:{
        // 声明 数组
       type:Array
    }
 })

</script>

运行效果

子组件向父组件传参

子组件向父组件传参主要通过defineEmits自定义事件,使用emit触发事件并传递参数。父组件通过监听子组件自定义事件，在事件处理函数中处理传过来的数据。

父组件

 <Son2Component @sendString="onSendString" @sendObejct="onSendObejct"  
  @sendArray="onSendArray" @sendFun="onSendFun" />
        <p>info1:{{ info1 }}</p>
        <p>info2:{{ info2 }}</p>
        <p>info3:{{ info3 }}</p>
<script setup>
import Son2Component from './components/Son2Component.vue';
import { ref} from 'vue'

// 用来接收子组件传的字符串
const info1=ref('');
// 用来接收子组件传的对象
const info2=ref({})
// 用来接收子组件传的数组
const info3=ref([])

const onSendString=(value)=>{
   info1.value=value;
}
const onSendObejct=(value)=>{
  info2.value=value;
}
const onSendArray=(value)=>{
  info3.value=value
}

const onSendFun=(numIncre)=>{
  console.log('f',numIncre);
  numIncre();
}
</script>

子组件

<template>
  <div>
    <button @click="sendstring">
        点击向父组件传递字符串
    </button>
    <button @click="sendObejct">
         传对象
    </button>
    <button @click="sendArray">
        传数组
    </button>

    <button @click="sendFun">
        传方法  
    </button>
    <!-- 当父组件调用 numIncre方法的时候 num自加1-->
    <div>num:{{ num }}</div>

  </div>
</template>

<script setup>
import { defineEmits,ref } from 'vue';

const num=ref(0);
const info=ref({
    sex:'男',
    leave:122
})
const list=ref(['q','w','e'])



// 定义自定义事件
const emit = defineEmits(['sendString','sendObejct','sendArray','sendFun']);

const sendstring=()=>{
    // 使用emit触发事件，且把参数传过去
    emit('sendString', '这是子组件传递的字符串');
}
const  sendObejct=()=>{
    // 传对象
    emit('sendObejct',info)
}
const sendArray=()=>{
    // 传数组
    emit('sendArray',list);
}
// 定义传过去的方法
const numIncre=()=>{
    num.value++
}
const sendFun=()=>{
    // 传方法
    emit('sendFun',numIncre)
}


</script>

运行效果，点击传方法按钮，会调用numIncre方法让数字加1

跨组件传参

Provide / Inject 是 Vue 3 中提供的一种依赖注入机制，允许一个祖先组件向其所有子孙组件注入一个依赖，不论组件层次有多深 。

首先先创建两个组件，ComponentA.vue和ComponentB.vue  在组件A中引入使用组件B

ComponentA.vue

<template>
  <div>
      <ComponentB></ComponentB>
  </div>
</template>

<script setup>
 import ComponentB from './ComponentB.vue';

</script>

ComponentB.vue

<template>
  <div>
    B组件 : {{receivedData}}
    <button @click="sendDataToGrandParent">向爷组件传递数据</button>
  </div>
</template>

<script setup>
// 使用inject 来接收
import { inject } from 'vue';
//接收App组件传递的数据
const receivedData = inject('sharedData');

// 组件B向App组件传递数据
// 注入从App组件提供的函数
const handleDataFromGrandChild = inject('handleDataFromGrandChild');
// 定义一个函数，用于触发数据传递
const sendDataToGrandParent = () => {
  const data = '这是从孙子组件传递的数据';
  // 调用注入的函数并传递数据
  handleDataFromGrandChild(data);
};
</script>

App组件中引入组件A

 <ComponentA></ComponentA>

<script setup>
import { ref,provide } from 'vue'
// App组件 传递数据给B组件
// provide，传递两个参数，第一个参数 注入key这是一个唯一的标识符，
// 它是用来在后代组件中查找和接收所提供数据的依据
// 第二个参数为传递的值
const sharedData = '父组件向组件c传递了数据';
provide('sharedData', sharedData);

// B组件 传递数据给App组件
// 定义一个函数，用于接收从孙子组件传递过来的数据
const receivedData = ref('');
const handleDataFromGrandChild = (data) => {
  receivedData.value = data;
};
// 提供这个函数给子孙组件
provide('handleDataFromGrandChild', handleDataFromGrandChild);
</script>

运行效果，当点击按钮的时候，app组件的文字会被渲染出来。

end

在前端开发中，跨组件传参是常见需求，尤其是在复杂的应用里，不同层级、不同模块的组件之间需要进行数据传递。（如有误欢迎指正）