Vue的propsData传递数据

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

白嫖leader

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

阅读量1.5k

点赞数 1

分类专栏：笔记文章标签： Vue.extend propsData 数据传递模板插值组件实例化

本文链接：https://blog.csdn.net/ksjdbdh/article/details/122299977

版权

笔记专栏收录该内容

82 篇文章 7 订阅

订阅专栏

引言：
大家一直都是使用v-bind去向组组件传值。但是那都是组件之间那样做的，如果我们使用Vue.extend或者Vue.component去创建了构造器，经过创建实例并最终挂在到了页面上，那么我们应该如何去向这个组件去传递数据呢？
下面要给大家介绍的是：propsData进行传递数据
使用全局扩展器时可以利用propsData传递数据
先自定义header标签，利用Vue.extend进行扩展构造器，往扩展构造器传递数据时，需要在挂载时调用propsData传递数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>propsData属性</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<header></header>
		<script type="text/javascript">
			var demo=Vue.extend({
				template:`<p style="color:red">这是利用propsData传递数据-----{{demo}}---{{a}}</p>`,
				data:function(){
					return{
						demo:'这里采用了插值的方式'
					}
				},
				props:['a']
			});
			new demo({propsData:{a:'propsData设置值'}}).$mount('header')
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

附加：
propsData解决传值：
1.在全局扩展里加入props进行接收。propsData:{a:1}
2.传递时用propsData进行传递。props:[‘a’]

白嫖leader

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的propsData传递数据

引言：大家一直都是使用v-bind去向组组件传值。但是那都是组件之间那样做的，如果我们使用Vue.extend或者Vue.component去创建了构造器，经过创建实例并最终挂在到了页面上，那么我们应该如何去向这个组件去传递数据呢？下面要给大家介绍的是：propsData进行传递数据使用全局扩展器时可以利用propsData传递数据先自定义header标签，利用Vue.extend进行扩展构造器，往扩展构造器传递数据时，需要在挂载时调用propsData传递数据。<!DOCTYPE html
复制链接

扫一扫