<template>
<div id="header">
<!-- 调用变量 -->
<h1>{{ msg }}</h1>
<!-- 3：调用组件的方法 -->
<p>{{ webInfo() }}</p>
<p>{{ webArea() }}</p>
<!-- 2:显示用户信息组件-->
<vProduct></vProduct>
<!--vProduct如果放在<div id="header"外，会提示： 组件模板应该只包含一个根元素。 -->
</div>
</template>
<script>
// 1:引导同目录下./userInfo.vue组件 并命名为vUserInfo，其中./表示在当前目录
import vUserInfo from ‘./userInfo.vue‘
import vProduct from ‘./product.vue‘
export default {
data () {
return {
msg: ‘我的主页 home.vue‘,
webUrl: ‘http://www.sqfcw.net‘,
address: ‘宿迁市宿城我‘
}
},
components: {
// 2:添加子组件vUserInfo,多个组件之间可以用,相隔开，此组件来源于上边import from
vUserInfo, vProduct
},
methods: {
// 3：添加组件的方法
webInfo: function () {
return ‘站点信息待完善‘ + this.webUrl
},
webArea: function () {
return ‘所在地区:‘ + this.address
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#header {
background: green;
}
#header p {
background: gold;
color: red;
}
#header ul {
height: 35px;
background: orange;
}
#header ul li {
padding: 0 10px;
height: 35px;
line-height: 35px;
float: left;
/* float: left; */
}
</style>
原文地址：https://www.cnblogs.com/asplover/p/10985027.html