vue3 参数传递 props

parent.vue

<template>
    <a-input v-model:value="InputValue">a-input>
    <childVue :value="InputValue"/>
template>
<script setup>
import { ref } from 'vue';
import childVue from './child.vue';

const InputValue = ref();



script>
<style lang="less" scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

child.vue

<template>
    <span> {{ value }} span>
template>
<script setup>
// setup 模式下的 传值写法
const props = defineProps({
    value: {
        // 可以传输多种数据类型
        type: [String, Number],
        // 是否必须传递
        required: true,
        // 默认值
        default() {
            return '空'
        },
        // 校验值合法性( 组件验证环节 )
        validator(value) {
            // The value must match one of these strings
            return ['success', 'warning', 'danger'].includes(value);
        }
    }
});

// setup 模式下的 传值简写 不进行判断
// const props = defineProps(['value']);

// setup 模式下的 传值简写2 值判断类型
// const props = defineProps({
//     value: String
// });




script>
<style lang="less" scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37