聊一聊非prop特性

非 prop 特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性，这些 props 会被自动添加到组件的根元素上

换句话说就是，我传递了，但是没有接收

    <div id="app">
        <vc-div :fuchuan="10" :p="00"></vc-div>
    </div>
    ...
        Vue.component("vc-div",{
           props:["fuchuan"],
            template:`  <div>
                            <div> {{wa}} </div>
                            <div>你笑我？{{fuchuan}}</div>
                        </div>`,
            data(){
                return {
                    wa:"儿子"
                }
            }
        })

从代码我们可以看出，我们当像绑定了两个属性 一个是fuchuan一个是p，而我们只接受了fuchuan，所以p就直接跑到了模板的根组件上边去了

但是我们虽然没有接收这个数据，但是我们也是可以拿到这个数据的

        Vue.component("vc-div",{
           props:["fuchuan"],
            template:`  <div>
                            <div> {{wa}} </div>
                            <div>你笑我？{{fuchuan}}</div>
                            <button @click="getData">点我</button>
                        </div>`,
            data(){
                return {
                    wa:"儿子"
                }
            },
            methods:{
                getData(){
                    console.log(this.$attrs)
                }
            }
        })

替换/合并已有的特性

默认情况下，非prop 特性的属性会覆盖组件根元素上同名的内容，但是针对 style 和 class 有特殊的处理，它们会合并（同名样式还是会覆盖）

	<div id="app">
        <p v-text="wa"></p>
        <vc-div :fuchuan="10" :p="0" :hehe="10" ></vc-div>
    </div>

    <script>
        Vue.component("vc-div",{
            props:["fuchuan"],
            template:`  <div>
                            <div> {{wa}} </div>
                            <div>你笑我？{{fuchuan}}</div>
                            <p> {{hehe}}-{{this.$attrs.hehe}} </p>
                            <button @click="getData">点我</button>
                        </div>`,
            data(){
                return {
                    wa:"儿子",
                    hehe:"你瞅啥"
                }
            },

这样我们就不需要去接收但是也可以使用了

在看另一种情况

    <div id="app">
        <p v-text="wa"></p>
        <vc-div :fuchuan="10" :p="0" :hehe="101" style="background-color: yellow;"></vc-div>
    </div>
	<script>
        Vue.component("vc-div",{
            template:`  <div>
                            ...
                            <div style="background-color: red;">你笑我？{{this.$attrs.fuchuan}}</div>
                            ...
                        </div>`,

浏览器反馈

所以，如果有冲突，组件内部模板的优先级高

禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false，我们可以通过组件的 this.$attrs 来获取这些属性

用法很简单

        Vue.component("vc-div",{
            inheritAttrs:false,
            ...
        })

开启前

开启后

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定

其实没什么大作用，因我们获取的话还是可以获取到的！但是在面向对象的继承的时候这点就很有用！

prop验证

组件的 props 就是组件的参数，为了确保传入的数据在可控的合理范围内，我们需要对传入的 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
      }
    }
  }
})