选项式API Demo

作者：Odboy (opens new window)

本站地址：https://blog.odboy.cn (opens new window)

文件后缀

*.vue

<template>
    <el-table v-loading="crud.loading" :data="crud.data" style="width: 100%;"
              @selection-change="selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="文件名">
            <template slot-scope="scope">
                <!-- 获取文件名 -->
                {{ scope.row.name }}
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    import QiNiu from './qiniu/index'
    import Local from './local/index'

    export default {
        // 唯一名称
        name: 'MyComponent',
        props: {
            // 用法：this.title
            // 外部传入：<MyComponent title="这个是标题传入演示"/>
            title: {
                type: String,  // Prop的类型
                required: true  // 该Prop是必需的
            }
        },
        // 引入的组件
        components: {QiNiu, Local},
        // 双向绑定的数据
        data() {
            return {
                crud: {
                    loading: false,
                    data: []
                }
            }
        },
        beforeCreate() {
            // 实例初始化前
            // beforeCreate 是 Vue 实例生命周期的第一个钩子函数。这时实例已经初始化，但数据和事件还未设置。
            // 核心功能：在此阶段，可以做一些初始化工作，但不能访问到 data 和 methods 中的数据，因为它们还未被初始化。
            // 典型用例：可以在这里进行一些全局的配置或者初始化一些非响应式的数据。
        },
        created() {
            // 实例创建后
            // created 钩子在实例创建完成后立即调用，此时实例已经完成了数据观测，属性和方法都已经设置好，但还没有开始 DOM 编译。
            // 核心功能：可以访问和操作 data 和 methods 中的数据。
            // 典型用例：可以在这里进行数据的请求，初始化数据等。
        },
        beforeMount() {
            // 挂载前
            // beforeMount 钩子在挂载开始之前被调用，相关的 render 函数首次被调用。
            // 核心功能：在这个阶段，模板已经在内存中编译完成，但还未挂载到 DOM 上。
            // 典型用例：可以在这里进行一些 DOM 操作，比如设置一些初始的 DOM 状态。
        },
        mounted() {
            // 挂载后
            // mounted 钩子在实例挂载到 DOM 上之后被调用。
            // 核心功能：此时，实例已经挂载到 DOM 上，可以进行 DOM 操作。
            // 典型用例：可以在这里进行 DOM 操作，或者依赖于 DOM 的第三方库的初始化。
        },
        beforeUpdate() {
            // 更新前
            // beforeUpdate 钩子在数据更新之前调用，在虚拟 DOM 重新渲染和打补丁之前被调用。
            // 核心功能：在这个阶段，可以进一步修改状态，不会触发重新渲染。
            // 典型用例：可以在这里对数据进行最后的修改或调整。
        },
        updated() {
            // 更新后
            // updated 钩子在数据更新之后调用，此时 DOM 已经根据数据的变化更新了。
            // 核心功能：可以在这里执行依赖于 DOM 的操作。
            // 典型用例：可以在这里进行一些 DOM 操作或者依赖于 DOM 的第三方库的操作。
        },
        beforeDestroy() {
            // 销毁前
            // beforeDestroy 钩子在实例销毁之前调用，此时实例仍然完全可用。
            // 核心功能：在这个阶段，可以执行一些清理工作，比如清除计时器、解绑事件等。
            // 典型用例：可以在这里清除组件内的计时器、取消订阅等。
        },
        destroyed() {
            // 销毁后
            // destroyed 钩子在实例销毁后调用，此时组件的所有绑定和事件监听器都已被解除。
            // 核心功能：在这个阶段，实例的所有东西都已经被销毁。
            // 典型用例：可以在这里执行一些最终的清理工作。
        },
        // 定义的方法
        methods: {
            selectionChangeHandler(val) {
                console.error(val)
            }
        }
    }
</script>
<!--局部生效的样式-->
<style scoped>
</style>