props特性的深入了解

Prop命名风格

（1）Prop 的命名风格

①PascalCase首字母大写命名即大驼峰法

②camelCase 小驼峰命名法

③kebab-case 短横线分隔命名法

注意：

HTML 中的特性是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，驼峰命名法的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名

<!-- html代码 -->
		<div id="demo">
			<my-age :my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
			el:"#demo",
		})

Prop 动态和静态

（1）静态Prop

<!-- html代码 -->
		<div id="demo">
			<my-age my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
			el:"#demo",
		})
打印结果是我的虚岁是201

（2）动态Prop

prop 可以通过 v-bind 动态赋值，对上述案例稍作修改

<!-- html代码 -->
		<div id="demo">
			<my-age :my-age="20"></my-age>//短横线命名法
		</div>
// vue代码
		 Vue.component('my-age',{
			props:['myAge'],//小驼峰命名法
			template:`
			<div>
			<h2>我的虚岁是{{myAge+1}}</h2>//小驼峰命名法
			</div>
			` 
		 }) 
		var demo=new Vue({
			el:"#demo",
		})
	答应结果是我的虚岁是21

props传值格式

props传值格式：props传值时，如果属性添加了:则会将后面的属性值理解为表单式，否则将会理解为字符串

具体详情看上文代码

组件参数props校验

组件参数校验：

父组件向子组件传值时，子组件有权对传递的内容进行相关约束，这个过程便是组件的参数校验。

1.字符串数组格式传值代码如下

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
		</div>
// vue代码 
		 Vue.component('my-blog',{
			props:['blogContent',"blogTitle"],
			template:`
				<div>
					<h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:"西游记"
			}
		})

2.props对象键值对格式传值代码如下，

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
		</div>
// vue代码 
		 Vue.component('my-blog',{
			 props:{
				 'blogContent':String,
				 "blogTitle":String
			 },
			 
			 
			
			template:`
				<div>
					<h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:"西游记"
			}
		})

注意如果把标题的值改为666可以正常显示，但vue有一个报错，此时只要把上班的string改为number即可

3.多类型数据验证

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
		</div>
// vue代码 
		 Vue.component('my-blog',{
			 props:{
				 'blogContent':String,
				  "blogTitle":[String,Number]
			 },
			 
			 
			
			template:`
				<div>
					<h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:"西游记"
			}
		})

注意：在原本的数据类型上写过个类型，满足其中一个即

4.必填项认证

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue"></my-blog>
		</div>
	// vue代码 
		 Vue.component('my-blog',{
			 props:{
				 'blogContent':String,
				 "blogTitle":{
					 type:String,
					 required:true
				 }
			 },
			template:`
				<div>
					// <h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:'西游记'
			}
		})

注意： required:true是必填项，否则会报错，如果改为fasle就不会报错了，

5.默认项

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" ></my-blog>
		</div>
	// vue代码 
		 Vue.component('my-blog',{
			 props:{
				 'blogContent':String,
				 "blogTitle":{
					 type:String,
					default:"默认项"
				 }
			 },
			template:`
				<div>
					// <h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:'西游记'
			}
		})

注意：如果不传值也不会报错，会默认的传入默认项三个大字

6.复杂验证(自定义校验)：

除了上述校验外，还可以定义更复杂的校验，使用validator(校验器)可以实现自定义校验。

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue":blog-title="titleValue"></my-blog>
		</div>
// vue代码 
		 Vue.component('my-blog',{
			 props:{
				 'blogContent':String,
				 "blogTitle":{
					 type:String,
					 validator(value){
						 // console.log(value)此时答应出来的value是他的值
						 if (value.length>10&&value.length<20) {
								alert("成功")
								return true
						 } else{
						 	alert("不成功")
							return false
						 }
					 }
				 }
			 },
			template:`
				<div>
					// <h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					
				</div>` 
		 }) 
		var demo=new Vue({
			el:"#demo",
			data:{
				contentValue:"大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue:'西游记和水浒转都是四大名著之一'
			}
		})

注意：validator的语法是跟一个函数写在props里是一个方法可以省略function和冒号，所判断的值一定要return回去要不到页面上会一直在弹框，用户体验度绝对极差

小小总结一下：

组件参数校验简介：

组件参数校验即子组件接收父组件传递参数时，执行数据校验

分类类型：

①基础数据类型type校验

②多条件数据类型type校验{[]}

③必填项required校验

④默认值default校验

⑤自定义校验器validator校验

非props特性与props特性

props特性：父组件传递属性时，子组件的props里声明了对父组件所传属性的接收，即子组件通过props接收父组件所传属性。

非props特性：父组件传递属性时，子组件的props里没有声明对父组件所传属性的接收，即子组件没有通过props接收父组件所传属性。

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue" :money=moneyValue></my-blog>
		</div>
// vue代码 
		Vue.component('my-blog', {
			props: {
				'blogContent': String,
				"blogTitle": {
					type: String,
				}
			},
			 template:`
				<div>
					<h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					<p>价格{{moneyValue}}</p>
					
				</div>`
		})
		var demo = new Vue({
			el: "#demo",
			data: {
				contentValue: "大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue: '西游记和水浒转都是四大名著之一',
				moneyValue: 600
			}
		})

注意：非props特性父组件传值子组件没有接受这就是非props特性，他的值是没有传进去的在模板的根元素上显示

<!-- html代码 -->
		<div id="demo">
			<my-blog :blog-content="contentValue" :blog-title="titleValue" :author="authorValue"></my-blog>
		</div>
		// vue代码 
		Vue.component('my-blog', {
			props: {
				'blogContent': String,
				'blogTitle': String,
				'author':String
			},
			 template:`
				<div>
					<h1>{{blogTitle}}</h1>
					<p>{{blogContent}}</p>
					<p>{{author}}</p>
				</div>`
		})
		var demo = new Vue({
			el: "#demo",
			data: {
				contentValue: "大闹天宫、三打白骨精、三借芭蕉扇",
				titleValue: '西游记和水浒转都是四大名著之一',
				authorValue:"吴承恩"
			}
		})

注意：props特性父组件传了子组件接受了这就是props特性

$attrs和inheritAttrs属性

vue中默认情况下，调用组件时，如果传入一些没有在props中定义的属性，会把这些“非法”属性渲染在组件的根元素上（class和style例外），而这些“非法”的属性会记录在$attrs属性上。

props特性的深入了解

inheritAttrs继承属性

如何控制不把这些非法的属性渲染在组件的根元素上呢？

答案是在组件内部设置inheritAttrs:false即可。

props特性的深入了解

a t t r s 指向渲染属性：通过 v − b i n d = " attrs指向渲染属性：通过v-bind=" attrs指向渲染属性：通过v−bind="attrs"可以把“非法”的属性渲染到指定的组件某个元素上

props特性的深入了解

有问题可以随时联系小编

props特性的深入了解

Prop命名风格

Prop 动态和静态

props传值格式

组件参数props校验

非props特性与props特性

$attrs和inheritAttrs属性

继续阅读

微信小程序（组件跳转、规范、层级准备）

计算属性侦听者和方法

vue组件之（父与子和非父子通信）

微信小程序（页面栈和API跳转）

Vue之过渡transition

Vue计算属性与侦听器计算属性简介computed vs methods侦听器/属性小结

2018年7月21日日报

2018年7月23日日报

12月6日

Vue对象：允许对组件的属性实现数据验证。

App开发日报 2015-03-25App开发日报 2015-03-25

作为程序员，每天交清晰的工作日报，不允许含糊和不详细，大家怎么看？

js生成弹窗样式

HTTP状态码 301 302

vue之生命周期钩子

VUE之全局API（自定义指令directive）