美文网首页
vue解决父组件调用子组件只执行一次问题

vue解决父组件调用子组件只执行一次问题

作者: 上海_前端_求内推 | 来源:发表于2022-02-28 11:03 被阅读0次

    在父组件中引用的子组件标签上添加属性,来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点,如果我们这一次和上一次传过去的属性值一样的话,watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行),导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。但是有时候我们需要这个组件每次都重新生成dom 元素,每次都执行created() 函数。这时候就用到了vue中的key 属性。

    <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>
    

    相关文章

      网友评论

          本文标题:vue解决父组件调用子组件只执行一次问题

          本文链接:https://www.haomeiwen.com/subject/pjhlrrtx.html