vue3 组件相互传值 ，父子传值，组件传值

思路： A是组件，在B页面调用，使用v-if来销毁组件，在B向A传值，A事件后再向B传值

接下来小张（张贵顺）给大家上代码

学习，编程社区，UI设计天梦星官网 (tmxkj.top)

1. A  页面（组件） 完整代码（使用了/element-plus）的组件

<template>
  <el-dialog
      v-model="data.fileDialogShow"
      title="Warning"
      width="30%"
      align-center
  >
    <span>Open the dialog from the center from the screen</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.fileDialogShow=false">取消</el-button>
        <el-button type="primary" @click="sendFileList()">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";

const props = defineProps<{ fileList:any }>();//接收外部传过来的值（接收）
const Emit = defineEmits(["receiveFile"]);//定义外部的函数 向外界传值（确定按钮）

const data=ref({
  fileDialogShow:true,//模态默认展开
  fileList:props.fileList,//文件列表
})
watch(()=>data.value.fileDialogShow,(newValue,oldValue)=>{
  if (newValue==false){sendFileList(false)}
})//监听数据变化

onMounted(()=>{
 console.log(data.value.fileList)
})

/**
 * @param {{提交发送文件数据}}
 */
const sendFileList = (e) => {
  if (e==false){
    Emit("receiveFile", e)
  }else {
    Emit("receiveFile", "ddd")
  }

}
</script>

<style scoped>

</style>

2.B页面，完整代码

<template>
  <el-button @click="openFileDialog()">新增</el-button>
  <div v-if="data.openFileDialog" >
     <file-dialog :file-list="data.fileList"  @receiveFile="receiveFile"  />
  </div>
</template>

<script  setup>
	import {Calendar, Search} from '@element-plus/icons-vue'
  import {ref, onMounted, watch} from 'vue'
  import FileDialog from "./fileDialog.vue";
  const data=ref({
   
    fileList:'',//文件列表
    openFileDialog:false,//文件模态是否展开
  })//数据源

  /**
   * @param{{打开组件,并传值}}
   */
  const openFileDialog=()=>{
    data.value.fileList="444"
    data.value.openFileDialog=true
 }
  /**
   * @param{{接收组件传过来的值}}
   */
  const receiveFile = (e) => {
    if(e==false){data.value.openFileDialog=false}//销毁组件
    else {
      console.log(e)
      data.value.openFileDialog=false
    }
  }
</script>

大功告成！！

前端综合网 开发者  天梦星编程社区链接  天梦星官网 (tmxkj.top)