VUE组件学习——props数据传递

最新推荐文章于 2024-05-29 18:55:00 发布

sjh0112

最新推荐文章于 2024-05-29 18:55:00 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/sjh0112/article/details/108804539

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VUE组件

最近用到了vue中父组件和子组件之间通信的相关知识，正好看书看到VUE组件这一章，在此记录一下

文章目录

VUE组件
前言
一、注册
二、数据传递
- 1. porps

前言

vue组件可以理解为预先定义好行为的ViewModel类。一个组件可以预定义很多选项，但是最核心的还是一下几个：

1）模板（template）-----模板生命了数据和最终展示给用户的DOM之间的映射关系

2）初始数据（data）-----一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态

3）接受的外部参数（props）-----组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由上至下），但也可以显式的声明为双向绑定

4）方法（methods）对数据的改动操作一般都在组件的方法内进行。可以用过v-on指令将用户输入时间和组件方法进行绑定

5）生命周期钩子函数（lifecycle hooks）-----一个组件会除法多个生命周期的钩子函数。比如created、attached、destroyed等，在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这些可以理解为Controller的逻辑被分散到了这些钩子函数中

提示：以下是本篇文章正文内容，下面案例可供参考

一、注册

看过了，先不写了

二、数据传递

总的来说，vue有三种数据传递方式：

props
组件通信
slot

1. porps

props是组件数据的一个字段，期望从父组件中传下来的数据。

因为组件实例的作用域是孤立的，这意味着不能也不应该在子组件的模板内直接引用父组件的数据，所以子组件需要显式的用props选项来获取父组件的数据

props可以是字面量，也可以是表达式，还可以绑定修饰符

（1）字面量语法

代码如下（示例）：

Vue.component('child',{
	//声明props
	props:['msg'],
	//props可以用在模板内
	//可以用'this.msg'设置
	template:'<span>{{ msg }},DDFE!</span>'
})

向它传入一个普通字符串

<child msg"hello"></child>

HTML特性不区分大小写。名字形式为驼峰式的props用作特性时，需要转换为短横线(kebab-case)形式

代码如下（示例）：

Vue.extend({
	//声明
	props:['myComponent'],
	template:'<div> {{ myComponent}} DDFE! </div>',
	replace:true //replace决定是都替换自定义元素
})
<!-- kebab-case in HTML -->
<child my-component="hello!"></child>

(2) 动态语法

类似于用v-bind将HTML特性绑定到一个表达式，我们也可以用v-bind将动态props绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

代码如下（示例）：

//定义子组件
var Child = Vue.extend({
	//声明props
	props:['didiprops'], //子组件期望从父组件传下来的数据
	template:'<div> {{didiprops}} </div>', //子组件模板
	replace:true
}}
//定义父组件
var Parent = Vue.extend({
	//父组件模板，给子组件传递的数据didiprops绑定在hello变量上
	template:'<p>i am parent</p><br/><child :didiprops="hello"></child>',
	data:function(){
		return {'hello':'hello,'} //hello变量的初始化数据
	},
	//引入子组件
	components:{
		//<child>只能用在父组件模板内
		'child': Child
	}
})
//创建根实例
new Vue({
	el:'#example',
	component:{
		'didi-props':Parent
	}
})

(3) 绑定修饰符
props默认是单向绑定

当父组件属性变化时，会传导给子组件，但是反过来不会

可以使用修饰符显式的声明单次绑定还是双向绑定

sync，双向绑定
once，单次绑定

代码如下（示例）：

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>
<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

双向绑定会把子组件的msg属性同步到父组件的parentMsg属性；
单次绑定在建立之后不会同步之后的变化；
如果props是一个对象或者数组，那么它是按引用传递的，在子组件中修改它会影响父组件的状态，而不管使用哪种绑定类型。

代码如下（示例）：

<body id="example">
	<input type="text" v-model="info.name"/>
	<!-- 虽然是单次绑定，但是因为绑定的是对象，所以是按引用绑定，所以在父组件中修改了info.name时，子组件中显示值也会发生变化 -->
	<child v-bind:msg.once="info"></child>
</body>
<script>
	//创建根实例
	new Vue({
		el:'#example',
		data:function(){
			return {
				info:{
					name:'顺风车'
				}
			}
		},
		component:{
			'child': {
				//声明props
				props:['msg'],
				template:'<div>{{msg.name}} DDFamily! </div>'
			}
		}
	})
</script>

（4）prop验证

组件可以为props指定验证要求。当组件给其他人使用时，可以确保其他人正确的使用组件，此时prop的值是一个对象。

代码如下（示例）：

Vue.component('example',{
	props:{
		//基础类型检测（'null'的意思是任何类型都可以）
		propA : 'null',
		//多种类型
		propB : [String,Number],
		//必需且是字符串
		propC:{
			type:String,
			required:true
		},
		//数字，有默认值
		propD:{
			type:Number,
			default:100
		},
		//对象/数组的默认值应当有一个函数返回
		propE:{
			type:Object,
			default:function(){
				return {msg:'hello'}
			}
		},
		//指定这个prop为双向绑定
		//如果绑定类型不对，将抛出一条警告
		propF:{
			twoWay:true
		},
		//自定义验证函数
		propG:{
			validator:function(value){
				return value > 10
			}
		}
		
	}
})

type可以是以下原生构造器：

String
Numbei
Boolean
Object
Function
Array type 也可以是一个自定义构造器，使用instanceof检测当prop验证失败时，Vue.js将拒绝在子组件上设置此值，如果是开发版本，将抛出一条警告

（5）prop转换函数

给prop定义一个coerce函数（vue.js 1.0.12新增）——每当prop在父类更新的时候，prop的值将会通过coerce函数，可以将它理解为prop的单向过滤器，只是它被定义在子组件内。

代码如下（示例）：

Vue.component('example',{
	props:{
		//转换函数
		//设置值之前转换值
		propG:{
			coerce:function(val){
				return val+'' //将值转换为字符串
			}
		},
		propH:{
			coerce:function(val){
				return JSON.parse(val) //将JSON字符串转换为对象
			}
		}
	}
})

（6）props&propData&data

props，作用于父子组件之间的数据传递
data，作为组建的私有数据存在
propData，常用来在组件初始化之后覆盖props中的属性

sjh0112

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE组件学习——props数据传递

VUE组件最近用到了vue中父组件和子组件之间通信的相关知识，正好看书看到VUE组件这一章，在此记录一下文章目录VUE组件前言一、注册二、数据传递1. porps前言vue组件可以理解为预先定义好行为的ViewModel类。一个组件可以预定义很多选项，但是最核心的还是一下几个：1）模板（template）-----模板生命了数据和最终展示给用户的DOM之间的映射关系2）初始数据（data）-----一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态3）接受的外部参数（prop
复制链接

扫一扫