Vue.js官网文档阅读——对于本人的查缺补漏（组件篇）

本文链接：https://blog.csdn.net/weixin_44593720/article/details/107504281

1.组件命名

当我们在使用Vue.component(‘compname’,{})来定义一个组件时，第一个参数即是我们组件的名称，组件的命名有两种方式：

第一种：
kebab-case (短横线分隔命名)
eg: t-upload
当我们使用这种命名方式时，
在引用该组件时使用也要用这种形式<t-upload>...</t-upload>

第二种：
PascalCase(首字母大写命名)
eg:TUpload
当我们在使用这种命名方式时，
在引用该组件时可以选用两种形式
一种：<t-upload>...</t-upload>
另一种：<TUpload>...</TUpload>

prop

单向数据流

所有prop都使得父子prop之间形成了一个单向下行绑定；父级prop的更新会向下流动到子组件中，但是反过来则不行，这样会防止从子组件意外变更父组件的状态，从而导致你的应用数据流向难以理解。
每次父组件发生变更时，子组件中所有的prop都会刷新为最新的值。这意外着你不应该在一个子组件内部改变prop。
prop不可以对其中的值进行修改，但可以经过一下两个处理，变成一种新的prop供大家使用：

方法一：在data中新定义一个变量，接收传递进来的prop
props:['show'],
data(){
	return {
		solveShow:this.show+‘处理后’
	}
}

方法二：computed属性返回一个新的值
props:['show'],
computed:{
	solveShow(){
		return this.show+'处理后'
	}
}

prop验证

类型检查：

方式一：
props:{
	propA:Number,  //参数必须是Number类型
	propB:[String,Number], //参数可以是String或Number类型
	propC:{
		type:String,
		default:'11',
		required:true,
	}, //指定类型，默认值，是否必需
	propD:{
		type:Object,
		default:function(){
			return {messga:'hello'}
		}
	}，
	propE:{
		validator:function(value){
			return ['success','warning','danger'].indexOf(value)!==-1
		}
	}，// 验证
}

类型检查中的type可以是下列原生构造函数的一个：
String、Number、Boolean、Array、Object、Date、Function、Symbol

对于绝大多数attribute来说，从外部传给组件的值会替换掉组件内部的值。

事件

不同于组件和prop，事件是你用什么方式命名，你在使用时就还用这个变量。例如，你用驼峰式命名，调用时依然要用驼峰式，转换成中划线就不是同一个事件了，反之亦然。

.sync

.sync修饰符，作为一个编译时的语法糖存在，他会被扩展为一个自动更新父组件属性的v-on监听器。实例来源

eg:
<parent :items.sync="data1"></parent>
等同
<parent :items="data1" @update:items="val => data1 = val"></parent>
watch: {
      items(val) {
        this.tableData = val
      },
      tableData(val) {
        this.$emit('update:items', val)
      }
    },
    computed: {
    },
    data() {
      return {
        tableData: []
      }
   }