您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
父子组件间的属性传递(自定义标签)(属性prop)
发布时间：2020-02-09 17:45:50编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<style>
.success{ color:yellow; }
.fail{ color:red; }
</style>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component("Vbtn",{
//template中的type因为在props中存在，所以可以被解析为变量，这里绑定了:class则前提是该button至少有class属性
template:'<button class = "default" :class="type"><slot></slot></button>',
props:["type"]
});
var Vcontent = {
//既然父组件中有绑定type属性，所以下面template中的type的值将会传递给父组件的type上
template:`
<div class='content'>
<Vbtn type="success">add</Vbtn>
</div>
`,
}
var Vaside = {
template:`<div class='aside'>
<Vbtn type="fail">del</Vbtn>
</div>`
};
var Vheader = {template:`<div class='head'></div>`};
var App={
template:`<div class='main' :style='{fontSize:postFontSize+"em"}'>
<Vheader />
<div class = 'main2'>
<Vaside />
<Vcontent/>
</div>
</div>`,
data(){
return {
postFontSize:1
}
},
components:{Vheader,Vaside,Vcontent}
}
new Vue({
el:'#app',
template:'<App></App>',
data(){
return {}
},
components:{App}
});
</script>
</body>
</html>
关键字词：vue,组件,prop,属性
上一篇：全局组件与插槽(slot)
下一篇：多插槽及填充