vue之props

最新推荐文章于 2024-07-03 09:30:43 发布

ljljlj1993

最新推荐文章于 2024-07-03 09:30:43 发布

阅读量399

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/ljljlj1993/article/details/90439820

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

vue之props

参考官网api ：https://cn.vuejs.org/v2/api/#props

作用：父组件通过props传递数据给子组件，子组件用过event给父组件传递消息，props允许是对象或数组，其中对象允许配置高级选项，如类型检测、自定义验证和设置默认值,具体如下：

在这里插入图片描述

type

可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。

default: any

为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

required: Boolean

定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

validator: Function

自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

<html>
	<head>
		<meta charset="utf-8">
		<title>Vue 的props</title>
	</head>
	<body>
		<div id="app">
		//如果你要直接传递数字、布尔值、数组、对象，而且不使用 v-bind ，传递的仅
//仅是字符串，
			<my-component message="[1,2,3]"></my-component>
			<my-component :message="[1,2,3]"></my-component>
			<my-component :message="helllo"></my-component>
			<div>{{helllo}}</div>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<script>
			/* var data = {
				counter: 0
			} */
			Vue.component('my-component', {
				props: ['message'],
				template: '<div>{{message.length}}</div>',
				/* template: '<button @click="counter++">{{counter}}</button>', */
				data: function() {
					/* return data; */
					return {
						counter: 0
					}
				}
			})
			var app = new Vue({
				el: '#app',
				data:{
					helllo:[1,2,5,3]
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

ljljlj1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之props

vue之props参考官网api ：https://cn.vuejs.org/v2/api/#props作用：父组件通过props传递数据给子组件，子组件用过event给父组件传递消息，props允许是对象或数组，其中对象允许配置高级选项，如类型检测、自定义验证和设置默认值,具体如下：type可以是下列原生构造函数中的一种：String、Number、Boolean、Array、Obje...
复制链接

扫一扫

专栏目录