javascript - Vue - 无法获取父组件数据

Question

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

谁能告诉我该怎么做？

谢谢。

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>'
          }
        }
      }
    }
  })
}

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

Answer 1

你的 aaa组件的模板没有单个根元素。我添加了一个 <div> (见下文)。

此外，更重要的是，如果 Prop 是 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>