vue3+vite+ts父子组件之间的传值

2023-12-21 22:39:39


前言

提示:这里仅描述<script lang="ts" setup>中的写法,另外一种写法的话,基本类似,这里不做展示了

随着vue2的落幕,vue3越来成熟,有必要更新一下vue3的父子组件之间的传值方式,和vue2的大差不差,都是一个道理,只不过写法上出现了差异,vue3+vite+ts安装这里就不写了,由于文章中使用了element-plus的dialog组件作为子组件的内容,所以前提工作是先安装一下element-plus


一、父组件向子组件传值

代码如下(父组件示例):

<script setup lang="ts">
import systemDialog from '../../components/systemDialog.vue'

import { reactive, ref } from "vue";

const perInfo = reactive([
    {
        name: '张三',
        age: 20
    },
    {
        name: '李四',
        age: 25
    },
])
// vue2中的ref,vue3中也一样是使用ref,只不过要定义一下这个变量
const systemDialogref = ref()

// 点击doShow这个方法,使用ref的方式将子组件的弹框调用起来,并且传值过去,
const doShow = () => {
    let str = '这是ref传过去的值'
    systemDialogref.value.showDialog(str)
}

</script>

<template>
    <div>
        <el-button text @click="doShow">click to open the Dialog</el-button>
        <systemDialog ref="systemDialogref" :perInfo="perInfo" msg="这是一段文本" />
    </div>
</template>

<style scoped>
</style>


代码如下(子组件示例):

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

// defineProps可以传递多个任意类型的值,类似vue2中的props
defineProps<{ perInfo: Array<any>; msg: string }>();

const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
    ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};

const testData = ref();

const showDialog = (val: any) => {
    testData.value = val;
    dialogVisible.value = true;
};
// 父组件使用ref调用showDialog方法,用到defineExpose将showDialog抛出去,直接用,不需要引入
defineExpose({
    showDialog
});
</script>


<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <div>下面的v-for循环就是父组件传过来的值</div>
            <div v-for="(item, index) in perInfo" :key="index">
                名字: {{ item.name }}
                年龄: {{ item.age }}
            </div>
            <div>下面是通过ref父组件传给子组件的值</div>
            <div>{{ testData }}</div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

注意:父组件代码中的perInfo和msg都是传给子组件的值,由于子组件是一个弹框,要用到ref的方式打开子组件的弹框

二、子组件向父组件传值

代码如下(子组件示例):

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessageBox } from "element-plus";

// defineEmits中可以写多个方法
const emit = defineEmits(["send-data"]);
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
    ElMessageBox.confirm("Are you sure to close this dialog?")
        .then(() => {
            done();
        })
        .catch(() => {
            // catch error
        });
};

const showDialog = () => {
    dialogVisible.value = true;
};
// 父组件使用ref调用showDialog方法,用到defineExpose将showDialog抛出去,直接用,不需要引入
defineExpose({
    showDialog
});
// 触发事件将子组件的值传递给父组件,send-data要在父组件中接收
const change = () => {
    emit("send-data", "这是子组件传递的一个值");
};
</script>


<template>
    <div>
        <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose">
            <el-button type="danger" plain @click="change">写一个按钮触发将值传给父组件</el-button>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">Cancel</el-button>
                    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
  

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

代码如下(父组件示例):

<script setup lang="ts">
import systemDialog from '../../components/systemDialog.vue'

import { ref } from "vue";


// vue2中的ref,vue3中也一样是使用ref,只不过要定义一下这个变量
const systemDialogref = ref()

// 点击doShow这个方法,使用ref的方式将子组件的弹框调用起来
const doShow = () => {
    systemDialogref.value.showDialog()
}

const sendData = ref(null)

const handleReceivedData = (res: any) => {
    console.log(res);
    sendData.value = res
}

</script>

<template>
    <div>
        <el-button text @click="doShow">click to open the Dialog</el-button>
        {{ sendData }}
        <systemDialog ref="systemDialogref" @send-data="handleReceivedData" />
    </div>
</template>

<style scoped>
</style>

子组件向父组件传值,和vue2的很相似,逻辑也一样,也是用到emit,只不过emit写法不一样

三、非父子组件传值,也就是任意两个组件的传值,和vue2基本相似,这里就不描述了,vue3里面建议大家使用pinia来进行传值。

文章来源:https://blog.csdn.net/qq_45952585/article/details/135132238
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。