(一)propsData Option全局扩展的数据传递
2018-02-15 本文已影响0人
我拥抱着我的未来
本节知识点
-
首先这个使用率并不高，因为后面会有vuex,他的作用就是单页面应用中保持状态和数据的
-
本机就是在全局扩展里面传递参数
概述
- propsData 不是和属性有关，他用在全局扩展时进行传递数据。
使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello></hello>
</div>
</body>
<script>
var hello = Vue.extend({
template:`<p style="color:red;">{{message}}这个就是属性{{a}}</p>`,
data:function(){
return {
message:"2018新年好"
}
},
props:['a']
})
new hello({propsData:{a:1}}).$mount("hello");
</script>
</html>
第二种用法验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<hello></hello>
</div>
</body>
<script>
var hello = Vue.extend({
template:`<p style="color:red;">{{message}}这个就是属性{{a}}</p>`,
data:function(){
return {
message:"2018新年好"
}
},
props:{
count1:{
type:Number,
default:0,
require:true
}
}
})
new hello({propsData:{a:1}}).$mount("hello");
</script>
</html>
- 使用propsData三步骤
(1) 在全局扩展里加入props进行接收.propsData:{a:1}
(2) 传递的时候用propsData进行传递props:['a']
(3) 插值的形式传入模板{{a}}
