前言
小编在日常开发中，基本是不使用propsData的，所以在这里我们了解一下即可。当然，可能对于一些开发人员会经常用到，比如在测试时，可以直接模拟一些数据，从而方便测试。
使用
创建实例时传递 props。主要作用是方便测试。只用于 new 创建的实例中。
示例代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<v-demo></v-demo>
</div>
<script type="text/javascript">
var Comp = Vue.extend({
props: ['msg'],
template: `<div>{{ msg }}</div>`
})
new Comp({
propsData: {
msg: 'hello'
}
}).$mount('#app');
</script>
</body>
</html>
|
在浏览器运行上面的代码，可以看到页面显示内容为hello，运行正常。
通过上面的代码，我们用三步解决了全局扩展的传值：
- 先在时全局扩展中加入
props: ['msg']接受msg的值；
- 然后在 new 示例中使用
propsData: { msg: 'hello'}给msg赋值；
- 最后通过
$mount挂载传递msg的值到全局扩展中。