vue-cli项目中如何将index.html的prop传递给Vue子组件并正常访问

1. 你在main.js中使用render函数直接渲染InputField组件时，Vue会直接将render返回的组件内容替换掉#app节点内的所有原有内容，你写在index.html里#app内部的<InputField default="My default text">标签根本不会被Vue解析，相当于直接被丢弃了，自然无法传递props。
2. default是JavaScript的保留关键字，用作props名可能出现意料之外的解析问题，建议更换为defaultValue这类非关键字名称。
3. 你写在组件内<input>标签上的default是原生HTML属性，和组件的props完全无关，无法通过this.default读取到该值。

你可以根据自己的使用场景二选一：

方案1：保留index.html内的组件传参写法 #

需要调整Vue实例配置，让Vue解析#app内的模板内容：

1. 首先修改InputField.vue的props定义，更换命名避免关键字冲突：

props: ["defaultValue"],
mounted(){
  console.log(this.defaultValue);
  this.valuess = this.defaultValue;
}

2. 修改index.html内的组件属性为kebab-case格式（HTML不区分大小写，驼峰props需要转成短横线分隔）：

<div id="app">
  <InputField default-value="My default text"></InputField>
</div>

3. 修改main.js代码，先全局注册组件，再指定模板为#app内的内容：

import Vue from 'vue'
import InputField from './InputField.vue'

// 全局注册组件，让模板可以识别InputField标签
Vue.component('InputField', InputField)

new Vue({
  template: '#app'
}).$mount('#app');

注意：该方案需要你使用带编译器版本的Vue，如果vue-cli默认用的是runtime-only版本，需要在vue.config.js中配置runtimeCompiler: true开启模板编译支持。

方案2：保留render函数写法，直接在render中传参 #

如果不需要在index.html里写参数，直接在render函数内传递props即可，index.html的#app节点留空就行：

1. 和方案1一样先修改组件props命名为defaultValue避免关键字冲突。
2. 修改main.js的render代码，手动传递props：

import Vue from 'vue'
import InputField from './InputField.vue'

new Vue({
  render: h => h(InputField, {
    props: {
      defaultValue: 'My default text'
    }
  }),
}).$mount('#app');

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