vue.js 2.0 沟通最佳实践

Question

我目前正在使用 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>

感谢您的回复

Answer 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.js 2.0 沟通最佳实践

vue.js 2.0 communication best practice

javascript

ecmascript-6

vue.js

vue-component