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

header.vue 调用变量,别的组件导入引用,组件方法事例实例的更多相关文章

  1. 【vue】父组件主动调用子组件 /// 非父子组件传值

    一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="he ...

  2. 二、Vue组件(component):组件的相互引用、通过props实现父子组件互传值

    一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...

  3. html中创建并调用vue组件的几种方法

    最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...

  4. VUE中的子父组件、兄弟组件之间相互传值,相互调用彼此的方法

    vue--组件传值 父组件传值给子组件--"props" 一.父组件--示例 <template> <child :choose-data="choos ...

  5. 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用

    组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树,像访达或资源管理器那样的.你可能有一个 <tree-folder> 组件,模板是这样的: <p> &l ...

  6. 第七十七篇:ref引用(在vue中引用组件实例)

    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...

  7. vue 简单实现父组件向子组件传值,简单来说就是子组件肆意妄为的调用父组件里后台返回的值

    首先在于父子组件传值的方法很多,本人在这里只是简单描述一下一个组件里面引用了子组件,那么子组件如何才能获取父组件中后台返回的值呢? 首先调用组件相信大家都应该明白了(不明白的自己撸撸文档), < ...

  8. vue父组件如何调用子组件的属性或方法

    常常我们需要组件的拆分,就涉及到父子调用的关系,那么父组件如何调用子组件的属性和方法呢? 子组件child <template> <div> {{msg}} </div& ...

  9. Vue父组件与子组件传递事件/调用事件

    1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...

随机推荐

  1. java-zhisji

    1. int indexOf(int ch):用来检查给定的一个字符在当前字符串中第一次出现的下标位置.这里的下标和数组的下标意思相近,0表示该字符串的第1个字符,以此类推.当该字符串中并不     ...

  2. 如何查看dll或者exe是X86还是X64架构

    使用VS里面的dumpbin.exe 用法:dumpbin /headers *.exe(需要运行vcvarsall.bat) C32 or Winhex PE  L为x86.PE  d†为x64 P ...

  3. 使用纯C++迭代器编写归并排序

    第一次尝试用C++迭代器编写算法,使用的是纯迭代器 void mergeSort(vector<int>::iterator beg, vector<int>::iterato ...

  4. codeforces 1020 C Elections(枚举+贪心)

    题意: 有 n个人,m个党派,第i个人开始想把票投给党派pi,而如果想让他改变他的想法需要花费ci元.你现在是党派1,问你最少花多少钱使得你的党派得票数大于其它任意党派. n,m<3000 思路 ...

  5. mybatis缓存问题导致无法查询到数据

    今天查询记录时,发现重复查询结果时出现空记录的情况 查看控制台信息,只有红色框选部分有进行查询数据,而其他没有.然而上图可看出有两条数据是能展现出来的,故有可能是mybatis缓存命中的. 因此在ma ...

  6. LeetCode 343.整数拆分 - JavaScript

    题目描述:给定一个正整数 n,将其拆分为至少两个正整数的和,并使这些整数的乘积最大化. 返回你可以获得的最大乘积. 题目分析 题目中"n 至少可以拆分为两个正整数的和",这个条件说 ...

  7. MySQL :LAST_INSERT_ID()函数总结

    作用:当对table进行insert操作时,返回具有Auto_increment(自动增长)特性的属性列的最新值. 该函数的特点 1.每当断开本次连接之后又重新连接时,该函数的返回值会被重置为0. 2 ...

  8. 动手学习pytorch——(3)多层感知机

    多层感知机(multi perceptron,MLP).对于普通的含隐藏层的感知机,由于其全连接层只是对数据做了仿射变换,而多个仿射变换的叠加仍然是一个仿射变换,即使添加更多的隐藏层,这种设计也只能与 ...

  9. 【Java并发工具类】CountDownLatch和CyclicBarrier

    前言 下面介绍协调让多线程步调一致的两个工具类:CountDownLatch和CyclicBarrier. CountDownLatch和CyclicBarrier的用途介绍 CountDownLat ...

  10. 07-HTML&CSS

    今日知识 1. HTML表单标签 2. CSS 3.总结 表单标签 * 表单: * 概念:用于采集用户输入的数据的.用于和服务器进行交互. * form:用于定义表单的.可以定义一个范围,范围代表采集 ...