Question

我遇到了这个问题。我已经创建了一个具有覆盖和加载的组件，现在我想与其他组件一起使用，但是由于某些原因，单击该按钮后“ prop_show_loading”不会更新。

<template>
    <span>
        <b-btn @click="sendWelcomeEmail()" variant="primary">Send Welcome Email</b-btn>
        <loading :prop_show_loading="show_loading"></loading>
    </span>
</template>

<script>
   export default {
      data () {
            return {
                show_loading: false
            }
        },
        methods: {
            sendWelcomeEmail(){
                this.show_loading = true;
                console.log(this.show_loading);
            }
        }
   }
</script>

在这里，我的加载组件在其中执行了逻辑以显示带有消息的加载或模态。

<template>
    <div v-if="show_loading || show_modal" class="overlay">
        <div v-if="show_loading" class="spinner">
            <spinner></spinner>
        </div>
        <b-modal hide-footer v-model="show_modal" centered>
            <p class="my-4" v-if="show_success_message">{{success_message}}</p>
            <p class="my-4" v-if="show_fail_message">{{fail_message}}</p>
        </b-modal>
    </div>
</template>

<script>
    export default {
        props: [
            'prop_success_message',
            'prop_fail_message',
            'prop_show_modal',
            'prop_show_fail_message',
            'prop_show_success_message',
            'prop_show_loading'
        ],
        data() {
            return {
                show_modal : this.prop_show_modal || false ,
                fail_message: this.prop_fail_message || 'Fail',
                success_message: this.prop_success_message || 'Success',
                show_fail_message: this.prop_show_fail_message || false,
                show_success_message: this.prop_show_success_message || false,
                show_loading: this.prop_show_loading || false
            }
        }
    }
</script>


<style>
    .overlay {
        position: fixed;
        display: block;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.5);
        z-index: 9999;
        cursor: pointer;
    }
    .spinner{
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        width: 100px;
        height: 100px;
    }
</style>

我希望有人能帮助我！谢谢！

Answer 1

将初始prop值复制到data值时，即

data () {
  return {
    // ...
    show_loading: this.prop_show_loading || false
  }
}

您失去了检测更改的任何机会，因为在分配新值时，对道具的原始引用将被破坏。

相反，只需在模板表达式中使用prop值，即

v-if="prop_show_loading"

这样，它将对外部变化做出反应。

您可以对所有属性值进行相同操作，也可以定义默认值。例如

props: {
  prop_success_message: {
    type: String,
    default: 'Success'
  },
  prop_fail_message: {
    type: String,
    default: 'Fail'
  },
  prop_show_modal: {
    type: Boolean,
    default: false
  },
  // etc...
}

请参见https://vuejs.org/v2/guide/components-props.html#Prop-Validation

Answer 2

我认为是由于您忘记在：prop_show_loading之前添加“ v-bind”的缘故。因为在Vue中，您需要将值与该特定模板绑定。所以我建议您尝试一下，让我知道它是否对您有用。

最终语法：-v-bind：prop_show_loading =“ show_loading”

希望有帮助

Vue Laravel：如何为自定义组件更新道具

2 个答案: