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>