组件的创建使用和组件的生命周期函数
更多组件使用请查看 uniapp 官网:https://uniapp.dcloud.io/use?id=%e7%bb%84%e4%bb%b6
一. 组件的创建使用
在uni-app中,可以通过创建一个后缀名为 vue
的文件,即创建一个组件成功,其他组件可以将该组件通过 impot
的方式导入,在通过 components
进行注册即可。
- 新建一个
test
组件<template> <view>这是一个组件</view> </template> <script> </script> <style> </style>
- 在其他组件中导入使用组件
<template> <view> <!-- 第三步:使用组件 --> <test></test> </view> </template> <script> //第一步:导用组件 import test from '../../component/test.vue' export default { //第二步:注册组件 components: { test }, data() { return {} } } </script> <style> </style>
二. 组件的生命周期函数
<template>
<view id="test">这是一个组件</view>
</template>
<script>
export default {
data(){
return{
number:1
}
},
beforeCreate() {
console.log('实例初始化',this.number)
},
created() {
console.log('实例创建完成',this.number)
},
beforeMount() {
console.log('实例挂载前调用',document.getElementById('test'))
},
mounted() {
console.log('挂载实例之后调用',document.getElementById('test'))
},
beforeUpdate() {
console.log('数据更新时调用')
},
updated() {
console.log('由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子')
},
beforeDestroy(){
console.log('Vue实例销毁之前调用')
},
destroyed(){
console.log('Vue销毁之后调用')
}
}
</script>
<style>
</style>