Question

您好我在父组件中创建了一个布尔值，并将其作为道具传递给子组件。它已初始化为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警告]：避免直接改变道具，因为该值将是父组件重新渲染时会覆盖。相反，使用基于道具价值的数据或计算属性。

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

是的，有人能帮帮我吗？感谢

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

Answer 2

我假设你正在尝试与孩子已经加载的父母沟通。在这种情况下，您可以将函数作为scale_y_continuous()传递，并在孩子坐骑时调用它。

父HTML：

prop

家长JS：

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

儿童JS：

methods: {
  loadFn() {
    this.childHasLoaded = true
  }
}

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

2 个答案: