Vue之props对象形式静态传值（024）

最新推荐文章于 2023-01-12 19:00:00 发布
最新推荐文章于 2023-01-12 19:00:00 发布
阅读量287 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31707323/article/details/116099602
版权

Vue之props对象形式静态传值

完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>componet03</title>
	</head>
	<body>
		<div id="app">
			<child name="li san" brothers="4" age="older" success="success"></child>

		</div>
		<script>
			//child component
			Vue.component('child', {
				props: {
					// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
					brothers: Number,
					// 多个可能的类型
					age: [String, Number],

					// 必填的字符串
					name: {
						type: String,
						required: true
					},
					// 带有默认值的数字
					manday: {
						type: Number,
						default: 18
					},

					// 自定义验证函数
					success: {
						validator: function(value) {
							// 这个值必须匹配下列字符串中的一个
							return ['success', 'warning', 'danger'].indexOf(value) !== -1
						}
					}
				},

				template: `<h1>I am {{name}} have {{brothers}} brothers, they are {{age}} my manage is: {{manday}} ,and I will {{success}}</h1>`

			})

			// root 
			new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>

效果如图：
在这里插入图片描述
总结：props 对象形式有更强的约束，不但可以指定数据类型，还可以指定默认值，还可以自定义验证。

从小白小菜开始
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue父子模版传值及组件传值的三种方法
08-28
本文将介绍三种常见的父子模板传值及组件传值的方法，适用于Vue 1.0版本。对于Vue 2.0及更高版本，官方文档提供了更详尽的指南，推荐查阅官方文档以获取最新和最准确的信息。 ### 第一种：Prop绑定 这种方法是最...
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
总结来说，Vue的组件通信机制是其强大功能之一。通过`props`，父组件能够将数据下传给子组件，使子组件根据接收到的数据进行渲染和操作。而子组件则通过`$emit`触发事件并携带数据，通知父组件执行相应的方法，实现...
vue组件传值 prop传递对象
qianxizq的博客
12-15 7175
vue组件传值prop
Vue props实现组件间数据传输
weixin_41987908的博客
10-24 1613
vue 组件间数据传输
vue-router中props传值的三种方式
m0_37705917的博客
09-27 3575
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。以下介绍使用 props 将组件和路由解耦的三种方式： 1、设置props为true，通过params的方法进行传递 { path:"groupDetail/:groupId",//定义其属性 component:groupDetail, props:true } 2、设置props为函数，通过query的方式进行参数的传递 { path:"grou
vue3.0--props传值
赵佳敏的博客
04-27 7080
props传值一、props类型二、传递静态或动态的 Prop三、单向数据流四、Prop 验证 一、props类型 以字符串数组形式列出的 prop props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 如果希望每个 prop 都有指定的值类型。可以以对象形式列出 prop，这些 property 的名称和值分别是 prop 各自的名称和类型： props: { title: String, likes: N.
Vue中props用法和传值问题
热门推荐
VegetableKCCCC的博客
10-14 3万+
props的基本用法是父组件给子组件传输数据和验证 基本用法： 1.在父组件中的data中定义值 2.在子组件中使用props声明要引用哪个值 3.标签中使用 4.在template模板中，要使用中划线写法；在script脚本中使用小驼峰 props的使用： 1.静态props 静态即传入的值不变化，直接在父组件中定义，子组件中使用 2.动态props 动态即传入的值会变化，父组件中要动态地绑定父组件的数据。 3.props验证 验证传入的props参数的数据规格，如果不符合数据规格则发出警告，注意这个数据
vue中使用props传值的方法
01-21
1.静态传值（在父组件中赋值好props中属性的值传递给子组件） 父组件 <input v-model=message> <child message=hello></child> [removed] import child from './components/child.vue' export ...
vue prop传值类型检验方式
12-28
如果是 prop 是静态传值，则必须是 String 类型 如果是 prop 是动态传值，则可以验证任意类型 示例，如果必须要传一个Number，就必须使用 bind //声明 Vue.component(blog-post, { props: { postTitle: { type: ...
静态页跳转传值、静态页跳转传值
02-26
例如，Vue的`router`可以方便地在路由之间传递参数，而React则有`props`和`context`等机制。 6. **隐藏表单提交**： - 在一个隐藏的表单中设置需要传递的值，然后通过JavaScript触发表单的提交，目标页面可以通过...
vue props 传值
gansilian的专栏
05-18 4770
一、子组件需要做的子组件要显式地用 props 选项声明它期待获得的数据props:[data]然后在组件内使用data二、父组件需要做的这个时候需要区分静态传值和静态传值静态在父组件使用子组件标签时   <tem data="haha"></tem>这个时候静态传值就完成了动态在父组件使用子组件标签时<tem v-bind: data="myData"></tem>data(){ return{ myData:"hah
Vue基础之使用props传递数据
qq_41720578的博客
04-23 1万+
1、基本用法 组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。通常父组件的模板中包含子组件，父组件要正向地向子组件传递数据或参数，子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来声明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象，这块先介绍数组的用法。比如我们构造一个数组，接收一个来自父级的数据message，并把它在组件模板中渲染，示例代码如下： <div id
props的几种写法
和曲而歌
05-14 4761
props的几种写法 1.数组形式（简写） props: ['propOne', 'propTwo'] 2.对象形式（带类型） props: { 'propOne': Object, 'propTwo': [String, Number] // 必须是字符串或数字类型 } 3.对象形式（带多种校验） props: { propOne: { type: Number, required: true, default: 0 },
props的字符串数组形式和对象形式
xiaokanfuchen86的博客
04-27 1420
以字符串数组形式列出的 prop： props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型： props: { title: String, likes: Numb...
Vue3——第十二章（Props）
why404
01-12 2万+
Vue3——第十二章（Props）
vue props 三种方式
weixin_51237264的博客
05-09 974
一、数组方式 props: ['Parentvalue1','Parentvalue2','Parentvalue3'] 二、对象方式 props: { // 属性值限定类型 parentValue1: Object, parentValue2: String, parentValue3: Array } 对象方式，可以声明 props属性的类型 三、props属性中的对象方式 props: { parentValue1: { ...
前端之vue引入静态资源、合并对象
weixin_46372074的博客
05-14 454
引入静态资源vue引入静态资源一.放入public√二.放入src/assets内 vue引入静态资源 一.放入public√ 例如新建一个css文件夹, 放css样式, 在public/index.html内用link引入 二.放入src/assets内 例如新建一个css文件夹, 放css样式, 然后再使用它的组件中用import引入.(但是引入文件内有依赖其他文件的话会报错,如下图) ...
微信小程序开发日记(二)
finedayforu的博客
03-26 361
一. VSCode开发微信小程序配置 安装插件 minapp 安装插件wechat-snippet 安装wxml插件 如何调试? 调试遇到两个问题,第一, 如何热更新 第二,如何看console 第三, 新建页面\新建组件等操作还是微信IDE好一些 这几个问题目前都没有太完整的解决方案, 幸运的是微信IDE有分窗弹出功能,有监测外部更新功能,...
VUE 设置全局的静态变量
cn_yaojin
05-08 6488
比如新建一个文件，global.jsglobal.BASE_URL = 'http://vue.wclimb.site/images/' global.SOCKET_DOMAIN = 'https://xx.xx.com/filesystem/upload/' 然后在main.js中引入：//引入全局的静态变量 import './global/global.js'在其他地方便可以方便的使用：co...
vue props传值对象
最新发布
06-08
您可以使用Vue的props属性将对象传递给子组件。在父组件中，您可以将该对象定义为一个变量，在子组件中，您可以通过props属性将该变量传递给子组件。下面是一个示例代码： 父组件中定义变量并将其传递给子组件： ``` <template> <div> <child-component :my-object="myObject"></child-component> </div> </template> <script> export default { data() { return { myObject: { name: "John", age: 30 } }; } }; </script> ``` 子组件中通过props属性接收并使用该对象： ``` <template> <div> <p>Name: {{ myObject.name }}</p> <p>Age: {{ myObject.age }}</p> </div> </template> <script> export default { props: { myObject: { type: Object, required: true } } }; </script> ``` 在上面的示例中，父组件中的myObject对象被传递给了子组件，并在子组件中通过props属性进行了接收和使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值