当前位置：首页 > article >正文

VUE3父子组件传参

article 2024/11/14 21:20:10

defineProps和defineEmits的使用场景‌

‌父组件向子组件传递数据‌：子组件可以通过defineProps接收来自父组件的数据，并在子组件的模板中使用这些数据。‌2
‌子组件向父组件发送事件‌：子组件可以通过defineEmits触发事件，并将数据发送回父组件，父组件可以监听这些事件并作出响应。‌

defineExpose

defineExpose 是 Vue 3 的 Composition API 中一个新的实用函数，用于在<script setup>语法下显式暴露组件的公共属性和方法，这在处理子组件时特别有用，允许父组件访问子组件的特定属性或方法。在 Vue 3 中，当我们使用defineExpose

父组件：

<com-dialog ref="drawerCreateModel" :title="createShow.title" :drawerType="createShow.drawerType" :data="createShow.data" @dialogVisible="closeCreat"/>
//引入子组件
import comDialog from './page/comDialog.vue'
//定义ref变量
const drawerCreateModel = ref()
//定义需要传给子组件的变量
const createShow = reactive({
    visible: false,
    data: {},
    title: '',
    drawerType: '',
})

//通过ref调用子组件的cancel（）方法
const closeModelCreat = () => {
    drawerCreateModel.value.cancel()
}
//当子组件的visible更改时，该方法被触发
const closeCreat = (newValue) => {
    createShow.visible = newValue
}

子组件：

//接收来自父组件的参数
const props = defineProps({
    data: {
        type: Object || Array,
        default: () => {
            return {}
        }
    },
    title: {
        type: String,
        default: ''
    },
    drawerType: {
        type: String,
        default: ''
    },
})
//定义父组件用@dialogVisible传过来的dialogVisible变量
const $emit = defineEmits(['dialogVisible'])
const cancel = () => {
   //通过$emit更新visible，从而触发父组件的closeCreat（）方法
   $emit('dialogVisible', false)
}
//向父组件暴露cancel（）方法
defineExpose({
    cancel
})

查看全文

http://www.kler.cn/a/293472.html