Vue js 在点击事件中将函数从子智利传递到另一个子组件

Question

我试图在单击按钮时传递函数，在子元素中单击按钮，然后通过父元素传递到另一个子组件，我不想为此使用商店，如何我可以这样做吗？

components/footer/footer.vue -- 这是点击按钮的地方

<template>
    <div class="footer-bottom-header-menu-bar mob"  @click="showMenu">
        <img src="~/assets/svg/menubar.svg" alt="+" />
    </div>
</template>

<script>
export default {
    methods: {
        showMenu() {
            this.$emit("show-menu");
        }
    }
}
</script>

layouts/default.vue --这是接收点击函数的父组件，并将其传递给app-header

<template>
    <div>
        <app-header />
        <Nuxt />
        <app-footer @show-menu="showMenu()"/>
    </div>
</template>

<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";

export default {
    components: {
        'app-header': header,
        'app-footer': footer
    },
    methods: {
        showMenu() {
            console.log("clicked");
        }
    }
}
</script>

components/header/header.vue -- 我想让点击功能在这个组件中执行一个动作

<script>
export default {
    data() {
        return {
            showMenuBar: false
        }
    },
}
</script>

Answer 1

你为什么担心传递函数？

当您 emit show-menu 事件时，只需像这样在您的父组件中切换一条数据：

<template>
    <div>
        <app-header :showMenuBar="showMenuBar" />
        <Nuxt />
        <app-footer @show-menu="showMenu"/>
    </div>
</template>

<script>
import header from "~/components/header/header";
import footer from "~/components/footer/footer";

export default {
    components: {
        'app-header': header,
        'app-footer': footer
    },
    data() {
      return {
        showMenuBar: false;
      };
    },
    methods: {
        showMenu() {
            // I would make this more dynamic than always
            // hardcoding it to true, but you get the idea
            this.showMenuBar = true;
        }
    }
}
</script>

然后在你的AppHeader中简单地把它当作道具：

<script>
export default {
    props: {
      showMenuBar: { 
        type: Boolean, 
        default: false,
    },
}
</script>

Answer 2

您可以在 parent 组件上声明任何属性：

data() {
    return { toBeWatched: 0 };
}

然后将它像 props 从 parent 传递到 header child:
<app-header :Trigger="toBeWatched" />
当您收听 @show-menu event（来自页脚 child）时，对您的属性进行任何更改：
<app-footer @show-menu="toBeWatched++" />
最后，您可以 watch 在 header child 上进行此更改，并且触发你的功能。

<script>
export default {
    data() {
      return {
        showMenuBar: false
      };
    },
    props: ['Trigger'],
    watch: {
      Trigger() {
        this.showMenuBar = !this.showMenuBar; // or do whatever you want
        console.log('showMenuBar : ' + this.showMenuBar);
      }
    }
};
</script>

Vue js 在点击事件中将函数从子智利传递到另一个子组件

Vue js pass a function from child chile to another child component on a click event

javascript

vue.js

nuxt.js