在子组件的 beforeDestroy/Destroyed 循环中更改道具的值不起作用

Posted 2023-02-23

【中文标题】在子组件的 beforeDestroy/Destroyed 循环中更改道具的值不起作用

【英文标题】：Change value of a props in beforeDestroy/Destroyed cycle of child component does not work

【发布时间】：2018-07-26 20:28:37

【问题描述】：

您好，我在父组件中创建了一个布尔值，并将其作为道具传递给子组件。已经初始化为false，当用户查看组件后，该值会变为true，表示页面已经被访问过。

我做了一些研究并关注了How to properly pass data from child to parent and parent to child component?

这是我的js代码：

<script>
    export default 
        props: 
            hasLoad: 
                type: Boolean
            
        ,
        data () 
            return 
                hasLoadModel: this.hasLoad
            
        ,
        created: function() 
            console.log(this.hasLoad);
        ,
        beforeDestroy: function() 
            this.hasLoadModel = true;
            this.hasLoad = true;
            console.log(this.hasLoadModel);
            console.log(this.hasLoad);
        
    
</script>

和html代码

<div v-model="skillLoadModel">..</div>

但我还是得到了

[Vue 警告]：避免直接改变一个 prop，因为它的值是 每当父组件重新渲染时被覆盖。相反，使用 基于道具值的数据或计算属性。

我尝试更改 beforeDestroy 或 Destroyed 的值，或者不使用 v-model，但它们都不起作用。离开页面后值发生了变化，但是当我重新进入页面时，该值已重置为默认值。

有人可以帮帮我吗？ 谢谢

【参考方案1】：

不要更改道具的值。拥有组件emit an event，以便父级可以采取适当的行动。

下面是一个组件示例，该组件在复选框被选中时创建，在未选中时被销毁。组件发出一个“垂死”事件，父级接收它并向控制台打印尖叫声。

new Vue(
  el: '#app',
  data: 
    showIt: true
  ,
  methods: 
    scream() 
      console.log("Aaarg!");
    
  ,
  components: 
    myComponent: 
      beforeDestroy: function() 
        this.$emit('dying');
      
    
  
);

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <input type="checkbox" v-model="showIt">
  <my-component v-if="showIt" hasload="true" @dying="scream" inline-template>
    <div>Here I am</div>
  </my-component>
</div>

【讨论】：

我已经阅读了一些文档，但似乎只有在发生点击事件时才会触发发射......您能否提供任何建议来制作不由点击触发的自定义事件？跨度>

嘿，非常感谢！它几乎可以工作，我做了一个 JsFiddle：jsfiddle.net/x69chen/m5jtp37p/6。我有一个问题，我想在emit之后，父组件中的值已经设置为true，但是为什么我的子组件中仍然是false？我必须检测值并写入函数取决于子组件中的这个布尔值......你有什么建议吗？

在发出之后，你需要等待 Vue 更新东西，然后值才会改变。使用$nextTick，就像在这个updated fiddle中一样。

谢谢你！它仍然有一些问题，然后我添加了手表，现在它可以工作了。 jsfiddle.net/x69chen/m5jtp37p/47

【参考方案2】：

我假设您正在尝试与孩子已加载的父母沟通。在这种情况下，您可以将函数作为 prop 传递，然后在子挂载时调用它。

父 HTML：

<child :my-load-fn="loadFn"></child>

父 JS：

methods: 
  loadFn() 
    this.childHasLoaded = true
  

儿童 JS：

props: ['myLoadFn'],
mounted() 
  this.myLoadFn()

【讨论】：

您好，这听起来可行，但我能问一下如何在子组件中使用 childhasLoaded 值吗？我的问题是我在子组件中使用 css 动画，并且每次进入组件时都会重新加载，所以我决定在用户​​第一次进入组件后切换一个类。我需要布尔值来切换类