VueJS 2.0 从父级到子级的通信

Posted 2023-02-23

【中文标题】VueJS 2.0 从父级到子级的通信

【英文标题】：VueJS 2.0 Communicating from the Parent to the Child

【发布时间】：2017-08-16 10:33:45

【问题描述】：

我确信有一种简单的方法可以做到这一点，但我想不通。

在我的 html 文件中，我有以下按钮：

<button @click="showModal">Show Modal</button>

单击该按钮运行以下方法：

new Vue(
    el: '#root',
    methods: 
        showModal()  Event.$emit('showModal'); ,
    
);

当我单击该按钮时，我希望在模态组件中切换一个类。下面是组件的相关代码：

Vue.component('modal', 

    template: `
        <div :class="[ modalClass, 'is-active' : isActive ]">
            ETC...
        </div>
        `

    data() 
        return 
            isActive: false,
            modalClass: 'modal'
        
    

我是 VueJS 的新手，正在尝试弄清楚如何在 Vue 中进行通信。我似乎无法弄清楚下一步。当单击按钮时，我需要做什么才能将 isActive 设置为 true？

感谢您提供的任何帮助。

一切顺利，

莫舍

【参考方案1】：

在你的 main.js 中（或者你实例化你的 Vue 应用程序的地方）

您可以使用普通的 vue 实例作为事件总线

Vue.prototype.bus = new Vue();

这样你就可以这样使用它了：

this.bus.$on('event', (params) => )

this.bus.$emit('event', params)

以我在 github 上的一个 vue 项目为例，我经常使用 eventbus。 https://github.com/wilomgfx/vue-weather

还可以查看这个关于 VueJS 2 的免费惊人系列，它真的很棒： https://laracasts.com/series/learn-vue-2-step-by-step

使用操作问题的完整示例：

https://codepen.io/wilomgfx/pen/OpEVpz?editors=1010

【讨论】：

这看起来很有希望，但我仍然无法弄清楚如何实现它。我应该在模态组件中添加什么，以便当我单击按钮时 isActive 将设置为 true 并且modal 会显示吗？我用我的代码设置了一个 CodePen，以防万一：codepen.io/anon/pen/VpdYgL?editors=0010

P.S.感谢 Laracasts 的参考——我现在实际上正在浏览那个系列，并同意它很棒。

没关系——我想通了，它有效！谢谢:)。

哈哈好吧！很高兴我能帮忙:)！。如果您需要更多帮助，可以在任何地方联系我，我非常活跃于 react 和 vuejs atm。

谢谢——应该做。

【参考方案2】：

要从父母与孩子交流，您可以使用components props。

如果您有更深入的交流（父母与 little-little...-child 交流），您可以使用 @WilomGfx 提到的 busEvent。

父母与孩子沟通的代码：

Vue.component('modal', 
    template: '<div :class="[ modalClass, \'is-active\' : isActive ]">' +
            'Hello Word !' +
        '</div>',
    data() 
        return 
            modalClass: 'modal'
        
    ,
    props: 
    	isActive:  type: Boolean, default: false 
    
);

new Vue(
    el: '#root',
    data() 
      return 
        isActive: false,
      
  ,
  methods: 
    showModal() this.isActive = true ,
  
);

.is-active 
  color: red;

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="root">
  <modal :is-active="isActive"></modal>
  <button @click="showModal">Show Modal (going red when prop isActive is true)</button>
</div>

【讨论】：

谢谢。这绝对有帮助，但不是我想要的 100%。我想知道是否有一种无需向模态标签添加自定义属性的方式进行通信。换句话说，我想要这个<modal>CONTENT</modal>。不是这个：`CONTENT

@Moshe 这是一个毫无意义的目标，会导致您编写更糟糕的代码。 props 是组件接收外部状态的正确方式。

好的，如果 eventbus 对你有好处。我向您展示了道具，因为我正在考虑这种情况：假设您的应用中有 3 个模态组件：您不能使用发射，因为如果使用它，所有模态都会改变。