Javascript vue.js 2.0通信最佳实践

我目前正在使用vue.js进行一些工作，我想问一下以下内容是否是良好的做法

我有一个父组件和一个子组件，例如下拉列表和下拉项。当一个下拉项被选中时，我通过

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
    }
  }
}


{{dropdown.selected.text}
从“./dropdown item.vue”导入DropdownItem
类下拉列表{
构造函数（名称、选定项、displayedItems）{
this.name=name
this.selected=new DropdownItem.uiClass（“，已选定”）
this.displayedItems=displayedItems
}
}
导出默认值{
uiClass:下拉列表，
名称：“ui下拉列表”，
数据（）{
返回{
是的
}
},
道具：{
下拉菜单：下拉菜单
},
方法：{
切换（）{
this.isClosed=！this.isClosed
}
}
}


类下拉项{
构造函数（值、文本）{
this.value=value
this.text=文本
}
}
导出默认值{
uiClass:DropdownItem，
名称：“ui下拉项”，
道具：{
值：字符串，
文本：字符串
},
计算：{
下拉项（）{
返回新的下拉项（this.value、this.text）
}
},
方法：{
选择（）{
this.$parent.dropdown.selected=this.dropdownItem；
这是。$parent.toggle（）
}
}
}

感谢您的回复
否。好的做法是从子级发出事件并在父级中处理数据。例如：

下拉项组件：

<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
    }
}

在应用程序大小上确实有所不同。如果你有中型到大型的应用程序。那么，如果您使用事件驱动开发或vuex，它将更具优越性。@GONG好的，非常感谢您的输入！这在vue 2.0中不起作用，因为事件不再向父级冒泡。您现在需要使用一个不正确的事件中心。检查链接的文档，该文档引用
Vue.js 2.0
。您可以将事件发送到父组件，但不能再从父组件分发到子组件，因为它以前是
@primozarome看起来你是对的。我一定是第一次看错了医生。感谢您的澄清。@gob您是指使用插槽还是仅在另一个组件中使用嵌套组件？我在Vue.js 2.0的子组件中一直使用这种模式。您也可以在插槽中使用它。例如，我在模式窗口组件的插槽中使用了它，其中我的插槽内容是一个子组件，它向主模式组件发出不同的事件。。。
<div class="dropdown-menu" v-show="!isClosed">
  <dropdown-item @selected="selectItem"><dropdown>
</div>

methods: {
    selectItem(item) {
      this.selectedItem = item
    }
}