(七)Component组件中的属性
2018-02-15 本文已影响0人
我拥抱着我的未来
本节知识点
- 组件中的属性
概述
- props 就是获取标签上的属性值，利用我们有一个标签叫做<hello>这个时候我们想给他来个属性变成<hello here="china"></here>实现这个就必须用到props
定义属性并获取到属性值
-
定义属性我们就需要用到props 加上数组形式的属性名称，例如props:['here','xxx','xxx']等在组件里面读出属性的值只需要{{名称}}即可
-
见代码
<!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 message="新年好"></hello>
</div>
</body>
<script>
// var app = new Vue({
// el:"#app",
// components:{
// "hello":{
// template:`<p style="color:red">{{message}}</p>`,
// props:["message"]
// }
// }
// })
Vue.component("hello",{
template:`<p style="color:red;">{{message}}</p>`,
props:["message"]
})
var app = new Vue({
el:"#app"
});
</script>
</html>
向构造器里面传值
- 你可以直接绑定 :message="message" 这样值发生了变化，所有的都会变化
<!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 :message="message"></hello>
</div>
</body>
<script>
// var app = new Vue({
// el:"#app",
// components:{
// "hello":{
// template:`<p style="color:red">{{message}}</p>`,
// props:["message"]
// }
// }
// })
Vue.component("hello",{
template:`<p style="color:red;">{{message}}</p>`,
props:["message"]
})
var app = new Vue({
el:"#app",
data:{
message:"新年好"
}
});
</script>
</html>
