parent-child - 访问父变量VueJS 2

Question

我有一个带有一些子模板的 .Vue：

<template>
  <test></test>
</template>
...
export default {
  data() {
    hello: '';
  }
}

在 test.vue 我试图访问“你好”，但我不能。我试过使用“道具”，但没有运气。我如何完成这个简单的任务？

Answer 1

这对于道具来说实际上很简单。也许由于函数中的语法错误而无法正常工作data？

父.vue：

<template>
    <test :my-prop="hello"></test>
</template>

<script>
    export default {
        data: () => ({
            hello: 'foobar'
        }),
        // ...
    };
</script>

测试.vue：

<template>...</template>

<script>
    export default {
        props: ['myProp'],
        mounted() {
            console.log(this.myProp); // foobar
        }
    };
</script>