Vue 2 如何在一个组件内调用另一个组件的方法并同步prop数据？

问题根因 #

Vue遵循单向数据流规则：prop仅支持父组件向子组件传递数据，子组件禁止直接修改传入的prop值。你在settings子组件中直接修改settingsContainerprop的操作，只会在子组件内部临时生效，不会同步到父组件的displaySettings变量，因此父组件绑定的样式不会更新。如果使用Vue开发版运行，控制台会直接抛出禁止修改prop的告警。

修复代码 #

1. 修改settings子组件 #

取消直接修改prop的逻辑，点击按钮时触发自定义事件，将新的显隐状态传递给父组件：

Vue.component('settings', {
    props: {
        settingsContainer: {
            type: String,
            required: true
        }
    },
    template: `
    <div>
        <button @click="toggleOverlay">Settings</button>
    </div>
    `,
    methods: {
        toggleOverlay: function() {
            const newDisplay = this.settingsContainer === 'block' ? 'none' : 'block'
            // 触发自定义事件，将新状态传给父组件
            this.$emit('update-display', newDisplay)
        }
    }
});

2. 修改sample-comp父组件 #

监听子组件抛出的自定义事件，收到新状态后更新自身的displaySettings数据即可：

Vue.component('sample-comp', {
    template: `
    <div>
        <settings
            :settings-container="displaySettings"
            @update-display="displaySettings = $event"
        ></settings>
        <div :style="{ display: displaySettings }">
            <p>Some Text</p>
        </div>
    </div>
    `,
    data: function() {
        return {
            displaySettings: 'block'
        };
    }
});

其他代码无需改动，修改后即可实现点击按钮切换元素显隐的需求。

内容的提问来源于stack exchange，提问作者Anna