vue3【父子组件间的传值--setup语法糖】

news2024/11/29 1:33:54

这篇文章主要讲解vue3语法糖中组件传值的用法、

一、父组件给子组件传值

父组件

<template>
    <div class='main'>我是父组件
        <Child :msg="parentMsg"></Child>
    </div>

</template>

<script setup>
import Child from './child'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance();
const parentMsg = ref('我是父组件的消息')
onMounted(() => {
})

</script>
<style scoped lang='less'>
.main {
    width: 500px;
    height: 500px;
    background: #1cd66c;
    margin: 0 auto;
}
</style>

子组件

在vue3的setup中，我们使用 defineProps 来定义父组件传递的props

注意：在子组件使用的时候需要通过props.xxx才能拿到props数据，下面是通过解构赋值接收props数据 let { msg } = toRefs(props)，因此模板中使用直接msg即可，否则应写为props.msg

<template>
    <div>
        <div class='main'>
            我是子组件
            <h4>{{msg}}</h4>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, getCurrentInstance, onMounted, toRefs } from 'vue'
const { proxy } = getCurrentInstance();
const props = defineProps({
    msg: {
        type: String, // 设置数据类型
        require: false,// 设置是否必填
        default: "", //设置默认值
    },
})
// 接收父组件传过来的值
let { msg } = toRefs(props)
console.log(msg)
onMounted(() => {
})

</script>
<style scoped lang='less'>
.main {
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
}
</style>

效果：

二、子组件给父组件传值

vue3中子组件向父组件传递值和vue2.x的区别：

vue2.x使用的是 this.$emit 而vue3使用的是emit（因为vue3中没有this），它们的传值一样都是方法加值，即vue2.x的是 this.$emit('方法名','传递的值(根据需要传或者不传)') ，vue3的setup语法糖的是 defineEmits 。

【defineEmits 使用说明】

1、在子组件中调用 defineEmits 并定义要发射给父组件的方法，也可以传空

const emits = defineEmits(['add1', 'del1'])

2、使用 defineEmits 会返回一个方法，使用一个变量emits(变量名随意)去接收

3、在子组件要触发的方法中，调用emits并传入发射给父组件的方法以及参数

 emits('add1', num.value)

子组件的传递：

<template>
    <div>
        <div class='main'>
            我是子组件
            <h4>{{msg}}</h4>
            <button @click="submit">点击子组件按钮传递信息</button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, getCurrentInstance, onMounted, toRefs, defineEmits } from 'vue'
const { proxy } = getCurrentInstance();
// 使用defineEmits创建名称
const emit = defineEmits()
// 点击按钮传递信息
const submit = () => {
    let obj = {
        name: "我是来自子组件的信息"
    }
    // 通过emit提交要传递的信息
    emit('clickChild', obj)
}
</script>
<style scoped lang='less'>
.main {
    width: 300px;
    height: 300px;
    background: pink;
    margin: 0 auto;
}
</style>

父组件接收：

<template>
    <div class='main'>我是父组件
        // 将接收到的信息显示在页面
        <h2> {{msg}}</h2>
        //这里定义子组件触发的传递参数的方法
        <Child :msg="parentMsg" @clickChild="getChildInfo"></Child>
    </div>

</template>

<script setup>
import Child from './child'
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
const { proxy } = getCurrentInstance();
const parentMsg = ref('我是父组件的消息')
let msg = ref('')
// 父组件接收传递过来的参数
function getChildInfo(params) {
    console.log(params)
    msg.value = params.name
}
onMounted(() => {
})

</script>
<style scoped lang='less'>
.main {
    width: 500px;
    height: 500px;
    background: #1cd66c;
    margin: 0 auto;
}
</style>