NO3 props传值和生命周期

172 阅读1分钟

父组件中:

<User :username="username" :age="18" class="abc" :type="type"/>

子组件中:

<template>

    <p>用户名: {{username}}</p>

    <p>年龄: {{age}}</p>

    <p>描述: {{description}}</p>

</template>

<script>
/**
   因为setup是围绕beforeCreate和created生命周期钩子运行的,所以不需要显示地定义它们。也就是说,在这些钩子中编写的任何代码都应该直接在setup函数中编写。 
*/

import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

export default {

    setup(props,content) {

        console.log(props)

        console.log(content)

        const description = ref(props.username + '年龄是' + props.age)

        onBeforeMount(() => {

            console.log('onBeforeMount1')

        })

        onBeforeMount(() => {

            console.log('onBeforeMount2')

        })
        
        // 在页面加载完成之前调用的方式,相当于created
        function created(){
            console.log('created')
        }
        created()

        return {

            description

        }

    },

    props: ['username','age']

}

</script>