Vue新手求助：子组件通过Props无法获取父组件数据

嘿，我来帮你排查这个问题～你的代码里有几个容易踩的小坑，导致Props没生效，咱们一个个来修正：

问题1：子组件注册写错了 #

你在父组件aaa里注册子组件bbb的时候，把components写成了component（少了个s），Vue没法识别这个错误的配置项，所以子组件根本没被正确注册。

问题2：父组件没有传递Props给子组件 #

就算子组件注册对了，你也没在父组件的模板里给子组件传递数据。得在使用<bbb>标签的时候，通过绑定属性的方式把父组件的数据传过去，另外注意驼峰命名的Props在模板里要转成短横线分隔（比如myMsg要写成my-msg）。

修正后的完整代码 #

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

<template id="aaa">
  <div>
    <!-- 绑定父组件的data到子组件的props上 -->
    <bbb :m="msg" :my-msg="msg2"></bbb>
  </div>
</template>

<script>
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', 
        // 修正为复数形式的components
        components:{ 
          'bbb':{ 
            props:['m','myMsg'], 
            template:'<h3>{{m}} <br> {{myMsg}}</h3>' 
          } 
        } 
      } 
    } 
  })
}
</script>

额外小建议 #

Props最好用对象形式定义并加上类型校验，这样代码更规范也更容易排查问题，比如：

props: {
  m: String,
  myMsg: String
}

内容的提问来源于stack exchange，提问作者Sylvia