Vue
Vue.js propsData Option 全局扩展的数据传递
Vue.js propsData Option 全局扩展的数据传递
propsData 不是和属性有关，他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识，作一个的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。代码如下：12345678910111213141516171819202122232425lang="en"> charset="UT
propsData 不是和属性有关，他用在全局扩展时进行传递数据。先回顾一下全局扩展的知识，作一个<header></header>的扩展标签出来。实际我们并比推荐用全局扩展的方式作自定义标签，我们学了组件，完全可以使用组件来做，这里只是为了演示propsData的用法。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html
lang
=
"en"
>
<head>
<meta
charset
=
"UTF-8"
>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>
PropsData Option Demo
</title>
</head>
<body>
<h1>
PropsData Option Demo
</h1>
<hr>
<header>
</header>
<script type="text/javascript">
var
header_a
=
Vue
.
extend
(
{
template
:
`
<
p
>
{
{
message
}
}
<
/p>`,
data:function(){
return {
message:'Hello,I am Header'
}
}
});
new header_a().$mount('header');
</s
cript
>
</body>
</html>
|
扩展标签已经做好了，这时我们要在挂载时传递一个数字过去，我们就用到了propsData。
我们用propsData三步解决传值：
1、在全局扩展里加入props进行接收。propsData:{a:1}
2、传递时用propsData进行传递。props:[‘a’]
3、用插值的形式写入模板。{{ a }}
完整代码：
|
1
2
3
4
5
6
7
8
9
10
|
var
header_a
=
Vue
.
extend
(
{
template
:
`
<
p
>
{
{
message
}
}
-
{
{
a
}
}
<
/
p
>
`
,
data
:
function
(
)
{
return
{
message
:
'Hello,I am Header'
}
}
,
props
:
[
'a'
]
}
)
;
new
header_a
(
{
propsData
:
{
a
:
1
}
}
)
.
$
mount
(
'header'
)
;
|
总结：propsData在实际开发中我们使用的并不多，我们在后边会学到Vuex的应用，他的作用就是在单页应用中保持状态和数据的。
转自技术胖博客
前往低代码交流专区
更多推荐
2558
0
0- 0
扫一扫分享内容
- 分享
已为社区贡献259条内容
回到
顶部
顶部
所有评论(0)