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

Question

我有 2 个组件，需要使用 function 和组件 B 中组件 A 的道具。function 只是隐藏/显示 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 存储来传递设置值（仅当这是更大更复杂的应用程序的一部分并且设置有其他影响时才使用 Vuex 存储）。

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

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

这是您可以执行的操作：

当应该更新显示时，在settings组件中发出一个事件。 要么有两个事件，一个用于显示覆盖，另一个用于隐藏它或仅使用 boolean 有效负载发出一个事件。
收听sample-comp上的事件/事件并相应地更改您的 css 属性。

亲切的问候。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-06-09 09:06:25

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-06-09 09:06:25

解决方案1
0 已采纳 2021-06-09 09:06:25