Vue-Prop

一、概述

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。

二、传递静态Prop

给 prop 传入一个静态的值：

案例：

	<div id="app">
        <apple-s title="hello world"></apple-s>
    </div>

    <script>
        Vue.component('apple-s', {
            props: ["title"],
            template: `
                <h1>{{title}}</h1>
            `
        })
        let vm = new Vue({
            el: "#app"
        })
    </script>

运行结果：

三、传递动态Prop

prop 可以通过 v-bind 动态赋值：

案例：

   <div id="app">
       <apple-s :title="msg"></apple-s>  //动态绑定title属性值为data数据的msg
   </div>

   <script>
       Vue.component('apple-s', {
           props:["title"],
           template: `
               <div>
                   <span>{{title}}</span>
               </div>
           `
       })
       let vm = new Vue({
           el: "#app",
           data: {
               msg: "hello"
           }
       })
   </script>

四、Prop验证

我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

五、Prop验证的类型

类型	描述
String	字符串类型
Number	数字类型
Boolean	布尔类型
Array	数组类型
Object	对象类型
Date	日期类型
Function	函数类型
Symbol	符号类型

六、非 Prop 的 Attribute

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 prop 定义的 attribute。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的 attribute，而这些 attribute 会被添加到这个组件的根元素上。
案例：

	<div id="app">
        <apple-s type="radio" class="active"></apple-s>
    </div>

    <script>
        Vue.component('apple-s', {
            props: ['a'],
            template: `
                <div>
                    <input v-bind="a"/>
                </div>
            `
        })
        let vm = new Vue({
            el: "#app",
        })
    </script>

运行结果：

注意：当组件接收到一个非prop特性的时候该特性会被添加到这个组件的根元素中

七、禁用 Attribute继承

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。

适合配合实例的 $attrs property 使用，该 property 包含了传递给一个组件的 attribute 名和 attribute 值
案例：

	<div id="app">
        <apple-s type="radio" class="active"></apple-s>
    </div>

    <script>
        Vue.component('apple-s', {
            props: ["a"],
            inheritAttrs: false,
            mounted() {
                console.log(this.$attrs);
            },
            template: `
                <div>
                    <input v-bind="$attrs"/>
                </div>
            `
        })
        let vm = new Vue({
            el: "#app",
        })
    </script>

使用$attrs能够返回组件的attribute 名和 attribute 值，如下：

运行结果：

有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些 attribute 会被赋予哪个元素。在撰写基础组件的时候是常会用到的。

总结：通过编写此篇博客，能够将父组件的属性静态、动态传递给子组件，子组件能够得到父组件传递来的值。Prop不只是传递数据也能设置传递数据的类型，若不符合指定类型浏览器将会给出警告。非常感想大家阅读此篇博客，如有相关问题可点击评论，后续也将更新内容，敬请期待!!!