Vue单文件组件Props传递异常：子组件未接收父组件数据

嘿，我来帮你看看这个问题～你遇到的prop没传递成功的情况，主要是两个地方没处理对，咱们一步步来修正：

问题分析 #

1. 子组件未声明接收的Prop：你的App组件没有显式声明要接收someProp，所以即使父组件传了值，Vue也会忽略这个未声明的属性。
2. 错误使用propsData：propsData是用来给当前Vue实例本身传递prop的（一般用于测试场景），不是给模板里的子组件传值的方式。给子组件传prop需要在模板里通过属性绑定来实现。

修正后的代码 #

1. 修改App组件（声明Prop） #

首先要在App组件里声明要接收的someProp，这样它才能识别并使用这个值：

// App.vue（注意单文件组件后缀一般是.vue哦）
<template>
  <div id="app">
    <h1>My... {{ someProp }}</h1> <!-- 这里可以直接渲染接收到的prop值 -->
  </div>
</template>

<script>
export default {
  // 声明要接收的prop
  props: ['someProp']
}
</script>

2. 修改根实例（正确传递Prop） #

把根实例里的propsData换成模板内的属性绑定，这样才能把值传递给App组件：

// index.js
import Vue from "vue";
import App from "./App";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  // 在模板里直接传递字符串常量prop，无需v-bind
  template: "<App someProp='this is a prop test!!'/>",
  components: { App }
});

如果你的prop值是动态的（比如来自根实例的data），可以用v-bind（缩写为冒号）实现动态绑定：

new Vue({
  el: "#app",
  template: "<App :someProp='propValue'/>",
  data() {
    return {
      propValue: "this is a prop test!!"
    }
  },
  components: { App }
});

这样修改之后，App组件就能正常接收到父组件传递的someProp啦～

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