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

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+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 方法
- 父组件
- 子组件

画面里面的子组件，每次加载都想触发子组件的 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>

コメント：