Vue 子道具不会在父

如何解决Vue 子道具不会在父

我正在使用 vue-property-decorator lib。我有 2 个组件：parent 和 child，child 是一个组件有一个道具 '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>

我的 父 组件中有一个属性 'buttonPressed'，我想将其属性绑定到子属性，因此每次都取决于在按下的按钮上，我会得到一个不同的模态标题：

<script lang="ts">
import { Component,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' 值只在页面加载时设置一次，但是当 'selectedButton' 对象发生变化时，'modalHeader' strong> 值未在子组件上更新。

帮助我的是将父对象定义为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 中的绑定属性，而是用一个新对象替换它，这就是父子绑定可能不起作用的原因。去看看。

解决方法

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

public buttonPressed!: ControlButtonSetting; // not initialised

您有两个选项可以正确初始化它：

#1 在声明之后直接给它一个适当的默认值，甚至是空的。

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

#2 如果您希望其默认值依赖于其他数据/道具，请使用 data 工厂。 （不要为此使用 created 钩子）

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 的反应性。

---

注意：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 是不可变的）