传递静态或者动态prop
1 .任何类型的值都可以传给一个prop
1 .v-bind:title="post.title + ' by ' + post.author.name" 可以这样加工
2 .title="My journey with Vue" 静态
3 .v-bind:title="post.title" 动态
2 .传入一个数字
1 .不论是静态还是动态的传入一个数字,都不能简写
2 .必须使用v-bind:name="value"
3 .来告诉这是一个表达式而不是一个字符串
3 .传入一个布尔值
1 .没有值传入的时候默认是true
2 .不论是静态还是动态传入一个一个布尔值,都必须是使用全称写法
3 .
4 .传入一个数组
1 .同上
2 .这个还之前没遇到过,不然又掉坑里面了
5 .传入一个对象:同上
6 .传入一个对象的所有属性 直接传入那个对象就可以了
1 .如果想要将一个对象的所有属性都作为prop传入,可以使用不带参数的v-bind取代prop-name
2 .
单项数据流
1 .父级的prop的更新会向下流动到子组件中,但是反过来不行
2 .传递下来的prop作为一个初始值,这个子组件希望将其作为一个本地的prop数据来使用---定义一个本地的data属性并将这个prop用作其初始值
3 .prop这个值以一种原始的值传入且需要进行转换。这个情况最好使用这个prop值来定义一个计算属性
4 .在js中,对象和数组是通过引用传入的,所以对一个数组或对象类型的prop来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态
5 .
prop验证
1.多种类型 propA:[String,Number]
2.必填字符串 prop:{type:String,required:true}
3.带有默认值 prop:{type:String,default:'123'}
4.带有默认对象 prop:{type:Object,default:function(){return {message:"123"}}}
5.自定义验证函数 prop:{validator:function(value){
return ['notice','normal','success','warn','message'].includes(value)
}}
//注意这个验证函数只是会提示一个报错,该怎么显示还是怎么显示,还是会传值进入,正常渲染
1 .验证失败的时候,开发环境构建版面会产生一个控制台报错
2 .prop会在一个组件实例创建之前进行验证,所以实例的属性data,computed在default或validator函数中是不可用的
3 .
非prop的属性传进来的话处理情况
1 .替换/合并特性的情况
1 .class,style传入的prop值会和原来组件内的值进行合并
2 .其他绝对大多数特性,从外部提供给的组件值会替换掉组件内部设置好的值
禁用特性继承
1 .inherAttrs:加入使用子组件时传了a,b,c三个prop,但是子组件仅仅声明了a,b.那么渲染后的c将作为html自定义属性显示在子组件的根元素上
2 .inherAttrs:false 根元素就不会这样做了,变得很干净
组件实例
1 .this.$attrs
1.包含了父作用域中不作为prop被识别且获取的特性绑定,除了class,style除外。当一个组件没有声明任何prop,这里会包括所有父作用域的绑定
2 .简单的来说就是组件的内置属性,值是父组件传入的所有prop中未被组件声明的prop
2 .this.$listeners
1 .包含了父作用域中不含.native修饰器的v-on事件监听器。它通过v-on="listeners"传入内部组件
2 .简单的来说,this.$listeners是组件的内置属性,值是父组件v-on事件监听器
3 .组件可以通过在自己的子组件上使用v-on="$listners",进一步把值传给自己的子组件,如果子组件已经绑定了$listener同名的监听器,那么两个监听器会以冒泡的方式先后执行
4 .