Verwenden von Requisiten zum Übergeben von Parametern unter dem VUE-Framework Vue3, um Datenübertragungseffekte zu erzielen ------ VUE-Framework

<template>
    <h1>{
    
    { name }}</h1>
    <h1>{
    
    { age }}</h1>
    <h1>{
    
    { sex }}</h1>
</template>

<script>
export default {
    name : "User",
    // 使用props接收传递的数据
    props : [
        // 在这里已经配置过了
        "name","age","sex"
    ],
    setup(props){
        // setup没有this对象,无法获取到props
        // vue3调用setup之前,会给setup传递参数,而第一个参数就是props
        // 这里的props也被包装成了一个代理对象,也是具有响应式的Proxy对象
        console.log(props);
        // props自动做了代理,不需要我们定义出来return了
        // let name = props.name;
        // let age = props.age;
        // let sex = props.sex;
        // return {name,age,sex};
    }
}
</script>

<style>

</style>

<Vorlage>

    <h1>{ { name }}</h1>

    <h1>{ { Alter }}</h1>

    <h1>{ { Geschlecht }}</h1>

</template>

<Skript>

Standard exportieren {

    Name: „Benutzer“,

    // Verwenden Sie Requisiten, um die übergebenen Daten zu empfangen

    Requisiten: [

        // Hier bereits konfiguriert

        „Name“, „Alter“, „Geschlecht“

    ],

    setup(props){

        // Setup verfügt nicht über dieses Objekt und kann keine Requisiten erhalten

        // Bevor vue3 Setup aufruft, werden Parameter an Setup übergeben, und der erste Parameter ist props

        // Die Requisiten werden hier auch in ein Proxy-Objekt gepackt, das ebenfalls ein reaktionsfähiges Proxy-Objekt ist.

        console.log(props);

        // Requisiten sind automatisch Proxys und wir müssen keine Rückgaben definieren.

        // let name = props.name;

        // let age = props.age;

        // let sex = props.sex;

        // return {name,age,sex};

    }

}

</script>

<Stil>

</style>

<template>
    <!-- 传递数据到我们的子组件上去,和Vue2还是一样的 -->
    <User name="Jack" age="50" :sex="sex"></User>
</template>

<script>
import {ref} from "vue";
import User from "./components/User.vue";
export default {
    name : "App",
    components : {User},
    setup(){
        let sex = ref("男");
        return {sex};
    }
}
</script>

<style>

</style>

<Vorlage>

    <!-- Die Weitergabe von Daten an unsere Unterkomponenten erfolgt immer noch wie bei Vue2-->

    <Benutzername="Jack" alter="50" :sex="sex"></Benutzer>

</template>

<Skript>

{ref} aus „vue“ importieren;

Benutzer aus „./components/User.vue“ importieren;

Standard exportieren {

    Name: „App“,

    Komponenten: {Benutzer},

    aufstellen(){

        let sex = ref("男");

        Rückkehr {Geschlecht};

    }

}

</script>

<Stil>

</style>