header.vue 调用变量,别的组件导入引用,组件方法事例实例

<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>