javascript - Vue 子 Prop 不会在父项中的绑定(bind)值更改时更新

Question

我正在使用 vue-property-decorator lib。我有 2 个组件:家长 和 child , child 是一个有 prop 的组件'modalHeader' :

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
    name: "modal"
})
export default class Modal extends Vue {
    @Prop({default: "Header"}) public modalHeader!: string;
}
</script>

子组件的模板:

<template>
    <div
        class="modal fade"
        id="detailsModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="detailsModalLabel"
        aria-hidden="true"
    >
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="detailsModalLabel">
                        {{ modalHeader }}
                    </h5>
                </div>
                ...
                </div>
            </div>
        </div>
    </div>
</template>

我有房产 '按钮按下' 在我的 家长 组件，我想将其属性绑定(bind)到子 Prop ，因此每次根据按下的按钮，我都会获得不同的模态标题:

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import Modal from '../modal/Modal.vue';

interface ControlButtonSetting {
    id: string,
    name: string,
    enabled: boolean,
    isDanger: boolean,
    okText?: string,
    componentType?: IModalComponent,
}

@Component({
    name: "admin-dashboards-page",
    components: {
        "modal": Modal
    }
})
export default class AdminDashboardsPage extends Vue {

    private buttonsArray: ControlButtonSetting[] = [
        { id: "removeButton", name: "Remove", enabled: false, isDanger: true, okText: "Remove" }
    ];

    public buttonPressed!: ControlButtonSetting;

    private showModal = false;

    created(): void {
        this.buttonPressed = this.buttonsArray[0];
    }

    public controlButtonClicked(button: ControlButtonSetting): void {
        this.buttonPressed = button;
        this.showModal = true;
    }
}
</script>

父组件的模板:

<template>
    <div>
        ...

        <!-- Modal -->
        <modal
            :modal-header.sync="buttonPressed.name"
            <template v-slot:modalBody>
                <component
                    :is="displayComponent()"
                    :dashboard-id="selectedListItemId">
                </component>
            </template>
        </modal>
    </div>
</template>

然而， 'modalHeader' 该值仅在页面加载时设置一次，但当 时'选定按钮' 对象已更改， 'modalHeader' 值未在子组件上更新。
帮助我的是定义 家长的 对象作为 Prop() :

@Prop() public buttonPressed!: ControlButtonSetting;

这样，每当父组件的 prop 更新时，子组件的 prop 就会更新。但是我开始在控制台中看到此消息:

[Vue warn]: 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: "buttonPressed"

我不确定这里有什么问题。你能帮我吗？
附言我的一个猜测是我没有改变 parent 中的绑定(bind)属性，而是用一个新对象替换它，这就是父子绑定(bind)可能不起作用的原因。要去看看

Answer 1

简而言之:您的 buttonPressed数据不是 react 性的，因为它没有被初始化。 Vue 必须正确初始化它才能将其标记为响应式。

public buttonPressed!: ControlButtonSetting; // not initialised

您有两个选项可以正确初始化它:
#1 在声明之后直接给它一个适当的默认值，甚至是空的。

public buttonPressed: ControlButtonSetting = {
  id: "",
  name: "",
  enabled: false,
  isDanger: false,
  okText: ""
}

#2 如果你想让它的默认值依赖于其他数据/ Prop ，使用 data工厂。 (不要为此使用 created 钩子(Hook))

public buttonPressed!: ControlButtonSetting; // use !: to tell typescript it's declared but in another place

// Even using `vue-property-decorator`, this will work and merge both data() and class properties
data () {
  return {
     buttonPressed: this.buttonsArray[0],
  }
}

请勿标记 buttonPressed作为 Prop ，因为它不是。并且 Vue Prop 不能从 child 那里更新，它会破坏 parent 的 react 性。

注意:Vue props 应该总是提供一个类型。即使使用 vue-property-decorator ，您必须指定它。

@Prop({ type: String, default: 'Header' }) <- Vue prop type, only for runtime
readonly modalHeader!: string // <- typescript type, only for build time

(我建议你使用 readonly 关键字告诉 Typescript 这个属性不能更新，因为在 Vue 中 props 是不可变的)