15. 组件的Prop

prop的大小写

因为html对属性并不敏感，所以参数最好不要使用大写，而去使用短杠方法。

prop类型

一直以来的prop都是直接以字符串的形式存在数组中的：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

但如果是【开发版本的vue.js】的话，可以使用这种方式来声明参数。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

当用户传入错误的格式的时候，系统会直接报错。注意在非开发版本的时候是不会报错的。

prop传递静态或者动态的prop

      <div>动态静态传递props值</div>
        <static-value :title="'here is a title'">静态传值</static-value>
        <move-title :title="newTitle">动态传值</move-title>

详情可以看笔记【12. 组件深入】。
如上，这个title可以使用bind去绑定一个静态的字符串，也可以动态绑定一个变量上去，传递给子组件。

单项数据流

因为父组件传递给子组件的是一个对象，那么如果子组件对该对象进行了修改，则会反过来修改父元素的变量。而子组件最好不要对父组件进行修改。

所以我们要将父元素的组件保存在某个地方，或者用计算属性提取出需要的参数，而不是直接去修改：

var component6 = {
            template: `
            <div>
                {{getNewTitle}}
                <div>{{saveTitle}}</div>
            </div>
            `,
            computed: {
                getNewTitle: function () {
                    return this.title + "方峻"
                }
            },
            data: function () {
                return {
                    saveTitle: this.title
                }
            },
            props: ["title"]
        }

非prop的特性

 <component7 abs="123" :title="'计算数据'" class="testClass"></component7>

在如上组件的使用的时候，有三个属性，abs和title，class。其中只有title被申明在组件的prop中，但是即使如此，其他属性，尤其是abs之类自定义属性会直接继承在子组件的更标签上：

// 解析之后会成这样：
<input abs="123">

这些继承来的属性和组件的根标签的属性进行替换与合并

从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！

prop禁用特性继承

如果不希望继承这些多余的属性，可以这样设置：

var component8 = {
             inheritAttrs: false,
            template: `<input>`
        }

解析出来的input就不会带有abs属性了。