+Vue+created のバックアップ(No.3)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+created へ行く。
- 1 (2022-09-02 (金) 12:20:36)
- 2 (2022-09-02 (金) 12:22:17)
- 3 (2022-09-06 (火) 14:58:52)

※前提条件：本文基于 Vue 2.0 创作

概要
画面里面的子组件，每次加载都想触发子组件的 created 方法
- 父组件
- 子组件

概要 †[edit]

实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化，el没有。然而，挂在阶段还没有开始, $el属性目前不可见，

这是一个常用的生命周期，因为你可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，也有一些童鞋喜欢在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

↑

画面里面的子组件，每次加载都想触发子组件的 created 方法 †[edit]

key 属性不是给开发人员用的，而是用来给vue 元素渲染的时候用的，每次渲染的时候会去拿这个key 值做对比，如果这一次的key 值和上一次的key值是不一样的才会重新渲染dom 元素，否则保持上一次的元素状态。根据这个原理我们可以给key 直接绑定一个时间戳

↑

父组件 †[edit]

<template>
    <div>
        <div>
            <h1>父级</h1>
            <button @click="handleLoad">点击重新加载子级</button>
        </div>
        <children :key="timer"></children>
    </div>
</template>
<script>
import children from '@/components/parent/children'
export default {
    name: 'parent',
    components: { children },
    data () {
        return {
            timer: ''
        }
    },
    methods: {
        handleLoad () {
            this.timer = new Date().getTime()
        }
    }
}
</script>

↑

子组件 †[edit]

<template>
    <div>
        子级
    </div>
</template>
<script>
export default {
    name: 'children',
    data () {
        return {}
    },
    created () {
        console.log('重新加载啦')
    }
}
</script>

コメント：