访问父变量VueJS 2

时间:2016-11-09 11:18:33

标签: parent-child vuejs2

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

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

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

1 个答案:

答案 0 :(得分:0)

道具实际上很简单。可能因为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>