1.需要import，然后components注册。然后如下代码调用。

<template>

  <header></header>  //注册后才能这样使用

  <body></body>

  <footer></footer>

</template>

2.父子组件传递规则

2.1 父到子组件传递：

子组件使用props声明变量liunx，然后父组件在模板中进行对变量liunx bind并赋值

2.2 子到父组件传递：

子组件使用发消息触发事件的方式告知父组件。this.$emit(),父组件收到监听这个事件，并处理。

还有一种类似组件广播事件方式的做法：eventbus

声明一个eventbus变量，并让其对外可以使用

任意组件需要引用此变量时，import方式有点区别。

然后对某些组件发送事件。

其他组件接收到此事件时，处理此事件。

Vue.js组件调用用及其组件通信的更多相关文章

  1. vue.js入门（3）——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  2. 每天记录一点：NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  3. Vue.js 3.x 中跨层级组件如何传递数据？

    provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...

  4. vue.js基础知识篇(6):组件详解

    第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...

  5. Vue.js 2.x笔记：组件（5）

    1. 组件简介 组件(Component)是 Vue.js 最强大的功能之一,组件可以扩展 HTML 元素,封装可重用的代码. 组件:为了拆分Vue实例的代码量,以不同的组件来划分不同的功能模块,需要 ...

  6. vue.js使用props在父子组件之间传参

    本篇文章是我参考官方文档整理的,供大家参考,高手勿喷! prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子 ...

  7. vue.js 二维码生成组件

    安装 通过NPM安装 npm install vue-qart --save 插件应用 将vue-qart引入你的应用 import VueQArt from 'vue-qart' new Vue({ ...

  8. Vue.js 系列教程 2：组件，Props，Slots

    原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第二部分.在这一部分,我们将学习组件, ...

  9. Vue.js 3 Step 创建一个组件

    Step1:Vue.extend()创建组件 Step2:Vue.component()注册组件,注册的标签一定要用小写 Step3:挂载点使用组件 <!doctype html> < ...

随机推荐

  1. UIView+PYJExtension

    UIView+PYJExtension.h: // // UIView+PYJExtension.h // 扩展 // // Created by 彭运京 on 16/6/21. // Copyrig ...

  2. etcd服务端和客户端安装

    下载地址: 服务端:http://download.csdn.net/download/wuxun1997/9841277 客户端:http://download.csdn.net/download/ ...

  3. delphi2010多线程编程教程

    多线程编程(1) - 先入门再说. 多线程应该是编程工作者的基础技能, 但这个基础对我来讲的确有点难(起码昨天以前是这样). 开始本应该是一篇洋洋洒洒的文字, 不过我还是提倡先做起来, 在尝试中去理解 ...

  4. 配置动态ip为静态ip qq交流总结

    修改 /etc/sysconfig/network-scripts/ifcfg-etho 修改dhcp 为 static 修改后的样例 这三个ip该怎么对应 ifconfig 123各自对应 修改/e ...

  5. go语言学习杂记

    go语言在windows下下载安装 推荐在golang中国下载 http://www.golangtc.com/download 安装.... go环境变量与工作目录 根据约定GOPATH需要建立3个 ...

  6. 南阳OJ 1170 最大的数

    最大的数 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 小明和小红在打赌说自己数学学的好,于是小花就给他们出题了,考考他们谁NB,题目是这样的给你N个数 在这n个数 ...

  7. 【转】学习使用Jmeter做压力测试(二)--压力测试的实施

    JMeter测试步骤: 1.建立测试计划 2.添加线程组 3.添加HTTP请求 4.增加监听器 5.执行测试计划 6.根据JMeter提供的报告分析结果 一.目标 测试访问目标服务器网站首页的每秒查询 ...

  8. java代码---继承-子类使用继承父类的属性。理解测试

    总结:对于继承.如果父类有的成员变量而子类没有,那么子类的成员变量赋值是来自于父类的,当在子类构造方法赋值时,它和父类的成员变量值是一样的 当成员变量在父类和子类中都存在时,父类用父类的属性,子类用子 ...

  9. Java调用Groovy

    记录一下 http://docs.groovy-lang.org/latest/html/documentation/guide-integrating.html

  10. 执行make出现“Warning: File `xxx.c' has modification time 2.6e+04 s in the future“警告的解决方法

    错误描述: 执行make命令时出现"make[2]: Warning: File `xxx.c' has modification time 1.6e+05 s in the future ...