Vue（六）：组件的Prop

2、Prop

　　1)、大小写问题
　　根据官网给的规范大概就是内部命名用驼峰命名，外部调用就使用其等价的 kebab-case (短横线分隔命名) 命名。养成一个好习惯是很有必要的，人家咋说你咋做呗。

　　2）、对传入属性的设置
　　我们可以对传入的属性设置type，官方定义的传入类型有 String,Number,Boolean,Array,Object,Date,Function,Symbol"。 还可以设置默认值、是否必填，甚至还能对传入的属性设置自定义的验证方法

propNum: {
    type: String,  //类型
    required: true,  //是否必填
    default: 100,  //默认数据
    validator:function(value){  //验证方法
        return value<1000;  //如果传进来的数值大于1000，那它将会产生一个控制台的警告
    }
},

　　3）、单向数据流和双向数据流
　　所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
　　但是在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
　　以上这些话都是从官网上抄的，我也试着自己总结了，确实没人家说得好。我能怎么办，还是举个栗子吧

<base-span :test-str.sync="str1"></base-span>{{str1}}  //这是父级代码

<template>//这是子级代码
  <span>{{testStr}}<button @click="str1='sdfsdfsdff'">change</button></span>
</template>

<script>
export default {
    props:["testStr"],
    data(){
        return{
            str1:"",
        }
    },
    watch:{
        str1:function(newVal){
            this.$emit('update:test-str',newVal)
        }
    },
}
</script>

　　4）、非 Prop 的 Attribute
　　这个啥意思呢，就是我传给你的属性，并不是你在组件中设置好的prop属性。如果传入的属性和根源素自带属性对上了，就是传给这个属性，不是的话当作自定义属性呗。聚个例子，比如文本元素的“title”属性，图片的“alt”属性，input框的“placeholder”属性，都是元素自带的。
　　父级组件传给子级组件会导致属性值被覆盖，唯二的两个例外，就是“style”和“class”两个属性。如果不想让根元素继承，可以在组件中设置"inheritAttrs：false"，同理，这玩意也挡不住“style”和“class”两个属性。
　　官网给出例子中，“inheritAttrs: false”是配合着$attrs来用最好。那么$attrs是啥呢？它是一个数组，$attrs是对父级的属性的继承，也就是说你利用“inheritAttrs: false”禁止的属性，都在$attrs里面。我们可以设置从父级继承过来的属性不绑定在根元素上，而是绑定在你想绑定的地方，确实比之前方便了一些。话不多说，看栗子：

<base-span title="123"></base-span>  //父级组件

<template>  //子级组件
  <div>
        <span v-bind="$attrs">这是段文字</span>
        {{$attrs["title"]}}  //显示组件中属性的值
  </div>
</template>