vue组件之Prop

之前说要学习一下VUE的组件通讯机制,但是因为公司的任务比较多且急,连续两个大的项目模块,合规的和反洗钱真的自己全身心的投入到其中了,连续加了几周的班,今天休息了一下,刚好把vue部分父子组件的通讯方式梳理了一下,就写点总结吧。
基本用法
Prop的基本用法很简单,只需要在子组件的Vue实例中定义该属性并把值设为目标属性的数组即可。

Vue.component('child', {
 ...
 // 接收message
 props: ['thisData']
 ...
})

由于HTML中的属性是不区分大小写的,所以当使用DOM中的模板(HTML中)时,thisData需要转化为this_data。但是,如果使用字符串模板(JS中)时,不受限制,可以为所欲为
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,我们需要通过子组件的props选项。
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop.
Prop中的静态和动态值
在正常情况下,一般在父组件中通过v-bind定义一个动态值,子组件通过Prop接收该值,所以,很多人认为,Prop只能接收动态值。但是,其实Prop可以接受静态属性。




    
    
    



动态传递数据




    
    
    



//输出: //CCC---ccc //CCC模块

单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父组件的 Prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父组件以及同级子组件的状态,从而导致你的应用的数据流向难以理解。
另外,每次父组件发生更新时,子组件中所有的Prop都将刷新为最新的值。这意味着你不应该在子组件内部改变Prop,如果你这样做了,Vue会在控制台抛出一个警告。
一般来说,如果子组件需要操作Prop中的值,需要将Prop中的值赋值给本地定义的属性:

props: ['message'],
data () {
    return {
  		mes: this.message
	}
}
...

非Prop特性
非Props特性是指在组件上定义了属性,而又没有使用Prop接受属性。此时,子组件内不可使用该属性值,该属性会直接添加到子组件的根节点上。
比如,在一个只含有一个div的子组件上,如果我向子组件传了一个content属性,但是子组件不使用Prop接收content属性,则渲染结果为:

Prop校验
Prop验证,我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格,Vue 会发出警告。在前台的控制器中可以看到警告信息。
子组件用Props接收父组件传来的消息有多种形式:
1.数组形式:数组形式相当于直接接收消息,不做任何校验,一般来说,不太建议使用数组形式

props: [data1, data2]

2.简单对象形式:如果不符合会跑出类型报错




    
    
    


    

3.复杂对象形式

props: {
 data1: {
  type: String,
  required: true,
  default: 'default value',
  validator (value) {
   return (value.length < 5)
  }
 },
 data2: {
  type: Array,
  required: true,
  default: () => ['', '', '']
 }
}

复杂对象形式的情况下,作为对象属性的参数可以写为对象形式,参数对象含有4个属性,type、required、default、validator。
type:设定参数类型,当传入参数类型与type不相符时,控制台会报错
required:设定参数是否是必传,当设为true时,不传该参数会报错
default:设定默认值,当参数类型为复杂类型时,需使用工厂模式生成默认值,否则Vue会在控制台抛出警告。如图所示,就通过工厂模式生成了一个长度为3的空数组。
validator:校验器,是一个函数,拥有一个代表传入值的形参,可以自定义各种校验,当返回false时,会报错,表示没通过校验。

你可能感兴趣的:(VUE)