vue.js 2.0 通信最佳实践

Posted 2023-02-23

【中文标题】vue.js 2.0 通信最佳实践

【英文标题】：vue.js 2.0 communication best practice

【发布时间】：2017-03-18 07:41:26

【问题描述】：

我目前正在使用 vue.js 做一些事情，想问一下以下是否是好的做法。

我有一个父组件和一个子组件，例如 dropdown 和 dropdown-item。当一个下拉项目被选中时，我通过this.$parent.dropdown.selected所选项目进行更改。这是好的做法还是我应该参加活动？

代码如下：

<template lang="html">
  <div class="btn-group">
    <button class="btn btn-secondary dropdown-toggle"  @click="toggle" type="button">
      dropdown.selected.text
    </button>
    <div class="dropdown-menu" v-show="!isClosed">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import DropdownItem from './dropdown-item.vue'

class Dropdown
  constructor(name, selected, displayedItems) 
    this.name = name
    this.selected = new DropdownItem.uiClass("",selected)
    this.displayedItems = displayedItems
  


export default 
  uiClass: Dropdown,
  name: "ui-dropdown",
  data() 
    return 
      isClosed: true
    
  ,
  props:
    dropdown: Dropdown
  ,
  methods: 
    toggle() 
      this.isClosed = !this.isClosed
    
  

<template lang="html">
  <a href="#" class="dropdown-item" @click.stop.prevent="select()"
    v-bind:class=" 'active': value == $parent.dropdown.selected.value ">
    text
  </a>
</template>

<script>
class DropdownItem 
  constructor(value,text) 
    this.value = value
    this.text = text
  


export default 
  uiClass: DropdownItem,
  name: "ui-dropdown-item",
  props:
    value: String,
    text: String
  ,
  computed: 
    dropdownItem() 
      return new DropdownItem(this.value, this.text)
    
  ,
  methods: 
    select() 
      this.$parent.dropdown.selected = this.dropdownItem;
      this.$parent.toggle()
    
  

</script>

感谢您的回复

【问题讨论】：

您的应用程序大小确实不同。如果您有中到大型应用程序。那么如果你将使用事件驱动开发或 vuex 会更受欢迎。

@GONG 好的，非常感谢您的意见！

***.com/documentation/vue.js/5941/events/20840/…

【参考方案1】：

没有。好的做法是从子级发出事件并处理父级中的数据。例如：

下拉项组件：

<a 
  class="dropdown-item" 
  @click.stop.prevent="select()">
  text
</a>

methods: 
    select() 
      this.$emit('selected', this.item)
    

父组件：

<div class="dropdown-menu" v-show="!isClosed">
  <dropdown-item @selected="selectItem"><dropdown>
</div>

methods: 
    selectItem(item) 
      this.selectedItem = item
    

更多信息请查看 Vue.js 文档：https://vuejs.org/guide/components.html#Custom-Events

【讨论】：

这在 vue 2.0 中不起作用，因为事件不再冒泡到父级。您现在需要使用事件中心

这不是真的。检查引用Vue.js 2.0 的链接文档。您可以向父组件发出事件，但不能再像以前在 中那样从父组件分发到子组件

是的好主意，我也想到了，但问题是我想使用最终组件相互嵌套，你明白我的意思吗？ <ui-dropdown><ui-dropdown-item></ui-dropdown-item></ui-dropdown>

@PrimozRome 看起来你是对的。我一定是第一次看错了文档。感谢您的澄清。

@gob 您的意思是使用插槽还是仅在另一个组件中包含嵌套组件？我在 Vue.js 2.0 的子组件中一直使用这种模式。您也可以在插槽内使用它。例如，我在插槽中使用它和我的模态窗口组件，其中我的插槽内容是一个子组件，它向主模态组件发出不同的事件...