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

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

在示例中，const在组件外部定义，这就是为什么我最终遇到这个问题。

Answer 1

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

如果您想在首次安装组件时访问东西，可以使用mounted生命周期方法

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

1 个答案: