<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也被包装成了一个P对象,也是具有响应式的Proxy对象
        console.log(props);
        // props自动做了Proxy,不需要我们定义出来return了
        // let name = props.name;
        // let age = props.age;
        // let sex = props.sex;
        // return {name,age,sex};
    }
}
</script>
 
<style>
 
</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.
<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.