Vue - 无法获取父级的组件数据

Question

我是Vue的新手，我正在尝试使用子组件中的道具获取父组件数据，但我无法获取父组件的数据。

有谁能告诉我该怎么做？

谢谢。

<mainfest>

window.onload = () => {
  var vm = new Vue({
    el:'#app',
    data:{
      a:'aaa'
    },

    components:{
      'aaa':{
           data(){
             return {
               msg:"parent's component data1",
               msg2:"parent's component data2"
             }
           },
        template:'#aaa',
        component:{
          'bbb':{
            props:['m','myMsg'],
            template:'<h3>{{m}} <br> {{myMsg}}</h3>'
          }
        }
      }
    }
  })
}

Answer 1

您的aaa组件的模板没有单个根元素。我添加了<div>（见下文）。

此外，更重要的是，如果道具myMsg使用:my-msg从父级传递：

var vm = new Vue({
  el: '#app',
  data: {
    a: 'aaa'
  },
  components: {
    'aaa': {
      data() {
        return {
          msg: "parent's component data1",
          msg2: "parent's component data2"
        }
      },
      template: '#aaa',
      components: {
        'bbb': {
          props: ['m', 'myMsg'],
          template: '<h3>{{m}} <br> {{myMsg}}</h3>'
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<template id="aaa">
  <div>
    <h2>aaa--->{{msg}}</h2>
    <bbb :m='msg' :my-msg='msg2'></bbb>
  </div>
</template>

<div id="app">
  <aaa></aaa>
</div>