父组件中:
<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>