访问父变量VueJS 2

Question

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

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

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

Answer 1

道具实际上很简单。可能因为data函数中的语法错误而无法正常工作？

<强> parent.vue：

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

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

<强> test.vue：

<template>...</template>

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