uniapp - 组件的创建使用和组件的生命周期函数

一时失言乱红尘 2021-07-25 23:58 612阅读 0赞

### 组件的创建使用和组件的生命周期函数 ###

*  一. 组件的创建使用
 *  二. 组件的生命周期函数

> 更多组件使用请查看 uniapp 官网：[https://uniapp.dcloud.io/use?id=%e7%bb%84%e4%bb%b6][https_uniapp.dcloud.io_use_id_e7_bb_84_e4_bb_b6]

# 一. 组件的创建使用 #

在uni-app中，可以通过创建一个后缀名为 `vue` 的文件，即创建一个组件成功，其他组件可以将该组件通过 `impot` 的方式导入，在通过 `components` 进行注册即可。

1.  新建一个 `test` 组件
    
        <template>
        	<view>这是一个组件</view>
        </template>
        
        <script> </script>
        
        <style> </style>
2.  在其他组件中导入使用组件
    
        <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>

[https_uniapp.dcloud.io_use_id_e7_bb_84_e4_bb_b6]: https://uniapp.dcloud.io/use?id=%E7%BB%84%E4%BB%B6