Question

我有 2 个组件，需要在组件 B 中使用带有组件 A 的 prop 的函数。该函数只是隐藏/显示 HTML 元素。但是，它不能正常工作。

我的设置组件：

Vue.component('settings', {
    props: {
        settingsContainer: {
            type: String,
            required: true
        }
    },
    template: `
    <div>
        <button @click="toggleOverlay">Settings</button>
    </div>
    `,
    methods: {
        toggleOverlay: function() {
            if (this.settingsContainer === 'block') {
                this.settingsContainer = 'none';
            }else if (this.settingsContainer === 'none') {
                this.settingsContainer = 'block';
            }
            console.log(this.settingsContainer);
            return this.settingsContainer;
        }
    }
});

我使用它的组件：

Vue.component('sample-comp', {
    template: `
    <div>
        <settings
            :settings-container="displaySettings"
        ></settings>
        <div :style="{ display: displaySettings }">
            <p>Some Text</p>
        </div>
    </div>
    `,
    data: function() {
        return {
            displaySettings: 'block' //toggleOverlay should change its value
        };
    }
});

主应用：

new Vue({
    el: '#app'
});

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12" defer></script>
    <!-- <script src="https://unpkg.com/vue@next" defer></script> -->
    <script src="test-settings-bt.js" defer></script>
  </head>

  <body>
    <section id="app">
      <sample-comp></sample-comp>
    </section>
  </body>
</html>

我在控制台中看到 toggleOverlay 更改了值，但它不影响我的样式（不更改 displaySettings 值）。

Answer 1

我建议使用事件或 Vuex Store 来传递设置值（仅当这是更大更复杂应用程序的一部分并且设置有其他影响时才使用 vuex Store）。

更好的做法是为组件定义明确的 API，让组件自己处理它的外观，而不是直接在组件 Y 中更改组件 X 的外观。

此外，正如 Phil 在评论中指出的那样，你永远不应该改变道具。它们应作为只读处理。

您可以这样做：

在应该更新显示时在您的 settings 组件中发出一个事件。要么有两个事件，一个用于显示叠加层，另一个用于隐藏叠加层，或者仅发出一个带有布尔负载的事件。
监听 sample-comp 上的事件并相应地更改您的 css 属性。

亲切的问候。

VueJs 2：如何在另一个组件中使用一个组件函数？

1 个答案: