vue父子组件通信

Question

错误描述
Property or method "is not defined on the instance but referenced during render

父组件
<inputDefault :placeholder="请输入内容" :maxlength=5 name="ipt_default"/>

子组件
<template>
  <div>
    <input v-if="type !== 'textarea'"
      :type="type"
      class="inner"
      :placeholder="placeholder"
      :disabled="disabled"
      :maxlength="maxlength"
      :readonly="readonly"
      :name="name"
      />
  </div>

</template>

<script type="text/ecmascript-6">

  export default{
    props : {
      type : {
        default : "text"
      },
      placeholder : {
        type : String,
        default : ""
      },
      maxlength : {
        type : Number
      },
      disabled : {
        type : Boolean,
        default : false
      },
      readonly : {
        type : Boolean,
        default : false
      },
      name : {
        type : String
      },
      value : {
        type : [String, Number],
        default : ""
      }
    }
  };
</script>

结果出错：[Vue warn]: Property or method "请输入内容" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <InputPage> at D:WorkSpace6itoolssrccomponentsinputPageinputPage.vue)

为什么placeholder加冒号出错？

Answer 1

加了冒号就会当作 Javascript 具体值来执行 而不是字符串
这么说吧 你这个相当于

var data = {
  placeholder: 请输入内容
}

// 很明显语法错误

如果你非要加冒号你可以试试这么写 字符串类型就不要加冒号了 冒号是用来区分具体数据类型的

<input :placeholder="'请输入内容'">

Answer 2

加了冒号相当于v-bind:placeholder="请输入内容"，模板解析的时候会把请输入内容当作data里的属性名