Vue.js 更改道具

2022-01-25 00:00:00 javascript vue.js vue-component

我对如何更改组件内部的属性有点困惑，假设我有以下组件:

I'm a bit confused about how to change properties inside components, let's say I have the following component:

{
    props: {
        visible: {
            type: Boolean,
            default: true
        }
    },
    methods: {
         hide() {
              this.visible = false;
         }
    }
}

虽然它有效，但它会给出以下警告:

Although it works, it would give the following warning:

避免直接改变 prop，因为每当父组件重新渲染时，该值将被覆盖.相反，使用基于道具值的数据或计算属性.正在变异的道具:可见"(在组件中找到)

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component )

现在我想知道最好的处理方法是什么，显然 visible 属性是在 DOM 中创建组件时传入的: <Foo :visible="false"></Foo>

Now I'm wondering what the best way to handle this is, obviously the visible property is passed in when created the component in the DOM: <Foo :visible="false"></Foo>

推荐答案

引用 你的小提琴中的代码

不知何故，你应该决定一个州居住的地方，而不是两个.我不知道将它放在 Alert 中还是放在它的父级中是否更适合您的用例，但您应该选择一个.

Somehow, you should decide on one place for the state to live, not two. I don't know whether it's more appropriate to have it just in the Alert or just in it's parent for your use case, but you should pick one.

父组件或任何兄弟组件是否依赖于状态?

Does the parent or any sibling component depend on the state?

  • 是的:那么它应该在父级(或在某些外部状态管理中)
  • 否:那么让它处于组件本身的状态会更容易
  • 两者都有:见下文

在极少数情况下，您可能需要组合.也许你想让父母和孩子都能够隐藏孩子.那么你应该在父母和孩子中都有状态(所以你不必在孩子内部编辑孩子的道具).

In some rare cases, you may want a combination. Perhaps you want to give both parent and child the ability to hide the child. Then you should have state in both parent and child (so you don't have to edit the child's props inside child).

例如，孩子可以在以下情况下可见:visible &&state_visible，其中 visible 来自 props，反映了 parent 的 state 中的一个值，state_visible 来自 child 的 state.

For example, child can be visible if: visible && state_visible, where visible comes from props and reflects a value in the parent's state, and state_visible is from the child's state.

我不确定这是否是您想要的行为，但这里有一个片段.我有点假设您实际上只想在单击子组件时调用父组件的 toggleAlert.

I'm not sure if this is the behavour that you want, but here is a snippet. I would kinda assume you actually want to just call the toggleAlert of the parent component when you click on the child.

var Alert = Vue.component('alert', {
  template: `
        <div class="alert" v-if="visible && state_visible">
        Alert<br> 
        <span v-on:click="close">Close me</span>
      </div>`,
  props: {
    visible: {
      required: true,
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      state_visible: true
    };
  },
  methods: {
    close() {
      console.log('Clock this');
      this.state_visible = false;
    }
  }
});

var demo = new Vue({
  el: '#demo',
  components: {
    'alert': Alert
  },
  data: {
    hasAlerts: false
  },
  methods: {
    toggleAlert() {
      this.hasAlerts = !this.hasAlerts
    }
  }
})

.alert {
  background-color: #ff0000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo" v-cloak>
  <alert :visible="hasAlerts"></alert>

  <span v-on:click="toggleAlert">Toggle alerts</span>
</div>

相关文章