Vue - 子组件中的访问道具，常规 javascript

Question

我正在从另一个 Vue 组件加载一个 Vue 组件，并将一个属性传递给该组件。 我需要在该组件的常规 javascript 中访问此属性，但无法弄清楚如何执行此操作。

简化的父组件可能如下所示：

<template>
  <div>
     <MenuEdit :menu-list="menuList"></MenuEdit>
  </div>
</template>

<script>
import MenuEdit from '@/components/MenuEdit';

export default {
  name: 'Admin',
  data: function () {
    return {
      menuList: ["Item1","Item2","Item3","Item4"]
    };
  },
  components: {
    MenuEdit
  }
}
</script>

<style scoped>
</style>

MenuEdit 可能如下所示：

<template>
  <div>
      {{ menuList }}
  </div>
</template>

<script>
//console.log(this.menuList) // Does not work.

export default {
  name: 'MenuEdit',
  props: [
      'menuList'
  ],
  methods: {
    testMenu: function() {
      console.log(this.menuList) //This works fine
    }
  }
}
</script>

<style scoped>
</style>

编辑

为了给这个问题添加一些上下文，我正在使用以下示例在 Buefy 上实现 sortablejs： https ://buefy.org/extensions/sortablejs

而不是在第一个常量的末尾调用“vnode.context.$buefy.toast.open( Moved ${item} from row ${evt.oldIndex + 1} to ${evt.newIndex + 1} )”，我想要更新组件（或者更好地说，更新相关的数组）。

在示例中，const 是在组件之外定义的，这就是我最终提出这个问题的原因。

Answer 1

您无法访问该道具，因为该代码（您的 console.log 所在的位置）在组件安装之前运行，甚至在它真正声明之前

如果你想在组件第一次挂载时访问东西，你可以使用挂载的生命周期方法