Question

让我们说我有一个包含另一个vue组件的模板：

<template>
    <div>
        <custom-vue></custom-vue>
    </div>
</template>

在我的CustomVue脚本中，我有：

<script>
export default {
    data: function() {
        return {
            dataToExtract: "Access this"
        }
    }
}
</script>

如何从CustomVue外部访问dataToExtract。如果不可能的话，我该如何实现类似的行为。

Answer 1

如果<nav> <a href="#">Home <span class="sr-only">(current)</span></a> <a href="#">Services</a> <a href="#">Products</a> <a href="#">Booking</a> <a href="#">Prices</a> <a href="#">Gallery</a> <a href="#">Contact us</a> </nav>组件是所显示模板的子组件，则必须通过子组件中的<custom-vue></<custom-vue>访问数据。

props

要将这些数据提供给子组件，您必须通过component标记将其提供，如下所示：

<script>
export default {
    props: ['data']
}
</script>

请记住，这是一个单向数据流，因此您将无法使用它来更改子级的数据状态。

Vuex是跨组件共享数据状态的更好方法。

我希望这会对您有所帮助。有关更多文档，请访问：https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

从VueJS中的组件获取数据

1 个答案: