Vue3：组件传值(父子组件/兄弟组件)案例说明

米柆

已于 2024-07-18 15:32:06 修改

阅读量278

点赞数 3

分类专栏： Millia's work 文章标签： vue.js 前端 javascript

于 2024-06-20 16:55:35 首次发布

本文链接：https://blog.csdn.net/millia/article/details/139833900

版权

Millia's work 专栏收录该内容

56 篇文章 4 订阅

订阅专栏

引用页面及组件：

<template>
<div id="millia">

<!--预约须知组件-->
<!-- @childPopShow="fatherPopShow" 子组件通过 @子组件方法 = 父组件方法 向父组件传值-->
<ticket-info @childPopShow="fatherPopShow"></ticket-info>


<!--当前页弹出组件调用方法showPost-->
<dl>
<dt>预约日期<span @click="showPost">获取的公告信息标题</span></dt>
<dd></dd>
</dl>



<!--弹出层组件-->
<!-- @popClose="fahterPopClose" 子组件通过 @子组件方法 = 父组件方法 向父组件传值-->
<!-- :popShow="popShow" 父组件通过 :子组件数据 = 父组件数据 向子组件传值-->
<notice-post :popShow="popShow" @popClose="fahterPopClose"></notice-post>


</div>
</template>

<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch,toRaw,watch} from 'vue' //引入vue实例
import TicketInfo from "@/components/TicketInfo.vue" //引入TicketInfo组件
import NoticePost from "@/components/NoticePost.vue" //引入NoticePost组件



//父组件传递NoticePost组件默认值 自定义isShow 是否显示  自定义isType 约定参数
let popShow = reactive({
  isShow:false,
  isType:undefined
})



//TicketInfo组件方法 与 NoticePost组件方法相同可整合成一个 这里为了区分
const fatherPopShow = (event,type) =>{
  //console.log(event,type)
  popShow.isShow = event
  popShow.isType = type
}


//NoticePost组件传值方法
const fahterPopClose = (event,type) =>{
  popShow.isShow = event
  popShow.isType = type
}


//显示公告
const showPost = ()=>{
  popShow.isShow = true
  popShow.isType = 4
}


</script>

组件TicketInfo：

<template>
<div>
<!--
childPopShow子组件传递父组件数据方法
父组件中引用为 @childPopShow="fahterPopClose
-->
<h6>获取的标题<button @click="childPopShow">预约须知</button></h6>
</div>
</template>
<script setup>
import {getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive} from 'vue'//引入vue实例

//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance();
//console.log(proxy.popShow.isType)

//使用defineEmits注册一个自定义事件
//如存在多个监听事件则为 defineEmits(['方法名1','方法名2','方法名3'])
const emit = defineEmits(["childPopShow"])


//点击事件触发emit，去调用我们注册的自定义事件childPopShow,并传递value参数至父组件
/*
多值
const 方法名1 = () =>{
  emit("方法名1", 值1,值2,值3)
}
*/
const childPopShow = () =>{
  emit("childPopShow", true,2)
}


</script>

组件NoticePost：

<template>
<!--弹出层使用了vant里的Popup 弹出层-->

<!--
v-model:show="popShow.isShow" 
v-model:show为vant方法 
popShow.isShow父级传递数据并使用

@click-close-icon="popClose" 
@click-close-icon为vant方法 
popClose子组件传递父组件数据方法
父组件中引用为 @popClose="fahterPopClose
-->

<van-popup v-model:show="popShow.isShow" @click-close-icon="popClose">
<div>
<h6>获取的标题</h6>
<div class="f14 lh24" v-html="获取的内容"></div>
</div>
</van-popup>
</template>
<script setup>
import {getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive,toRaw,watch} from 'vue';
/*
:popShow="popShow" 父组件通过 :子组件数据 = 父组件数据 向子组件传值
接收父组件传递数据
defineProps({
  popShow: Object,
})
*/

defineProps({
  popShow: Object,
})

//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance();

//使用defineEmits注册一个自定义事件
//如存在多个监听事件则为 defineEmits(['方法名1','方法名2','方法名3'])
const emit = defineEmits(["popClose"])


//wacth监听自定义isType参数变化获取不同内容
watch(proxy.popShow, (newValue, oldValue) => {
  console.log(newValue,oldValue)
  if(proxy.popShow.isType != undefined){
    
    //wacth监听自定义isType参数变化获取不同内容

  }
})


//点击事件触发emit，去调用我们注册的自定义事件childPopShow,并传递value参数至父组件
/*
多值
const 方法名1 = () =>{
  emit("方法名1", 值1,值2,值3)
}
*/
const popClose = ()=>{
  emit("popClose", false,undefined)
}


</script>

补充：

多值父组件：

<template>

<!--
绑定多数据
:childDataOne="fatherDataOne"
:childDataTwo="fatherDataTwo" 

绑定多方法
@childOne="fatherOne"
@childTwo="fatherTwo"
-->
<notice-post
 :childDataOne="fatherDataOne" :childDataTwo="fatherDataTwo"
 @childOne="fatherOne" @childTwo="fatherTwo"
>
</notice-post>


</template>
<script setup>
import {defineComponent,getCurrentInstance,ref,reactive,computed,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered,onActivated,onDeactivated,onServerPrefetch,toRaw,watch} from 'vue'//引入vue实例
import NoticePost from "@/components/NoticePost.vue" //引入子组件


//父级传递子组件数据
let fatherDataOne= reactive({
  dataOne_A:"父级元素内的第一个数据里第一个值",
  dataOne_B:"父级元素内的第一个数据里第二个值"
})


//父级传递子组件数据
let fatherDataTwo= reactive({
  dataTwo_A:"父级元素内的第二个数据里第一个值",
  dataTwo_B:"父级元素内的第二个数据里第二个值"
})

//父组件接收子组件传值方法
const fatherOne = (event,type) =>{
  console.log(event,type)
  //{0: '子元素第二个方法第一个值', 1: '子元素第二个方法第二个值'}
}

//父组件接收子组件传值方法
const fatherTwo = (event) =>{
  console.log(event)
  //子元素第一个方法第一个值 子元素第一个方法第二个值
}

</script>

多值子组件：

<template>
<div>

<button @click="childOne">第一个子组件传递按钮</button>
<button @click="childTwo">第二个子组件传递按钮</button>

</div>
</template>
<script setup>
import {getCurrentInstance,defineProps,defineEmits,defineExpose,ref,reactive,toRaw,watch} from 'vue' //引入vue实例

defineProps({
  childDataOne: Object,
  childDataTwo:Object
})

//使用vue的getCurrentInstance 方法获取当前组件实例
const { proxy } = getCurrentInstance();
console.log(proxy.childDataOne,proxy.childDataTwo)
//{dataOne_A: '父级元素内的第一个数据里第一个值', dataOne_B: '父级元素内的第一个数据里第二个值'}
//{dataTwo_A: '父级元素内的第二个数据里第一个值', dataTwo_B: '父级元素内的第二个数据里第二个值'}


//定义多个传值方法
const emit = defineEmits(["childOne","childTwo"])


//第一个传值方法 传多值
const childOne= ()=>{
  emit("childOne", "子元素第一个方法第一个值","子元素第一个方法第二个值")
}

//第二个传值方法 传数据变量
let childData = ref(["子元素第二个方法第一个值","子元素第二个方法第二个值"])
const childTwo = ()=>{
  emit("childTwo", childData.value)
}


</script>