介绍 & lt; !DOCTYPE html> & lt; html> & lt; head>
& lt;元charset=皍tf-8"/比;
& lt;元http-equiv=癤-UA-Compatible"内容=癐E=edge"比;
& lt; title>页面Title
& lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1,比;
& lt;脚本src=癶ttps://cdn.jsdelivr.net/npm/vue@2.5.17 dist/vue.js"祝辞& lt;/script>
& lt; style>
* {
保证金:0;
填充:0;
}
李{
list-style:没有}
身体{
身高:2000 px;
溢出:隐藏;
}
.header {
宽度:100%;
高度:40像素;
背景:# e1e1e1;
text-align:中心;
行高:40像素;
位置:固定;
}
.header按钮{
填充:0 rem 0.2快速眼动;
高度:40像素;
上图:0;
}
.header按钮:nth-of-type (1) {
位置:固定;
左:0;
}
.header按钮:nth-of-type (2) {
位置:固定;
右:0;
}
& lt;/style> & lt;/head> & lt; body>
& lt; p id=癮pp"祝辞
& lt;自订标头:title=皌itle"祝辞
& lt;按钮槽=發eft"祝辞返回& lt;/button>
& lt;/custom-header>
& lt;/p>
& lt;模板id=癶eader"祝辞
类& lt; p=癶eader"祝辞
& lt;槽的名字=發eft"祝辞& lt;/slot>
& lt; span>{{标题}}& lt;/span>
& lt;槽的名字=皉ight"祝辞& lt;/slot>
& lt;/p>
& lt;/template>
& lt; script>
Vue.component (“custom-header", {
模板:& # 39;# header # 39;
道具(“title"):
});//多插槽的使用,则使用名字属性来指定要插入的位置
var vm=new Vue ({
艾尔:& # 39;#应用# 39;
数据:{
标题:“通讯录“;
},
组件:{
}
});& lt;/script> & lt;/body> & lt;/html>
这篇文章给大家分享的是有关Vue创建头部组件的方法是什么的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
感谢各位的阅读!关于Vue创建头部组件的方法是什么就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
