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的末尾，我想更新组件(或者更好地说，更新相关的Array(。

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

Answer 1

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

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