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

Posted 2021-12-24 asplover

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