组件通信：
　　　　子组件要想拿到父组件数据 props
　　　　子组件不允许直接给父级的数据, 赋值操作如果想更改，父组件每次穿一个对象给子组件，
　　　　对象之间引用。

　　　　例子：
　　　　　　<script>
　　　　　　　　window.onload=function(){
　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　data:{
　　　　　　　　　　　　　　　　giveData:{
　　　　　　　　　　　　　　　　　　　　a:'我是父组件数据'
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　'child-com':{
　　　　　　　　　　　　　　　　　　props:['msg'],
　　　　　　　　　　　　　　　　　　template:'#child',
　　　　　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　　　　　change(){
　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　this.msg.a='被改了';
　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　}　　
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　};
　　　　　　</script>
　　　　　　<template id="child">
　　　　　　　　　　<div>
　　　　　　　　　　　　<span>我是子组件</span>
　　　　　　　　　　　　<input type="button" value="按钮" @click="change">
　　　　　　　　　　　　<strong>{{msg.a}}</strong>
　　　　　　　　　　</div>
　　　　　　</template>

　　　　　　<div id="box">
　　　　　　　　　　父级: ->{{giveData.a}}
　　　　　　　　<br>
　　　　　　　　<child-com :msg="giveData"></child-com>
　　　　　　</div>

　　例子：自定义事件

　　　　

　　<script>
　　　　//准备一个空的实例对象
　　　　var Event=new Vue();

　　　　　　var A={
　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<span>我是A组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　<input type="button" value="把A数据给C" @click="send">
　　　　　　　　　　　　　　　　</div>
`　　　　　　　　　　　　　　,
　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　　　Event.$emit('a-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是a数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　};
　　　　　　var B={
　　　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　　　　　<span>我是B组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　　　　　<input type="button" value="把B数据给C" @click="send">
　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　`,
　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　Event.$emit('b-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是b数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　};
　　　　　　var C={
　　　　　　　　template:`
　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　<h3>我是C组件</h3>
　　　　　　　　　　　　　　　　<span>接收过来的A的数据为: {{a}}</span>
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　<span>接收过来的B的数据为: {{b}}</span>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　`,
　　　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　　　a:'',
　　　　　　　　　　　　　　　　　　b:''
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　},
　　　　　　　　　　mounted(){
　　　　　　　　　　　　　　　　//var _this=this;
　　　　　　　　　　　　　　　　//接收A组件的数据
　　　　　　　　　　　　　　　　Event.$on('a-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.a=a;
　　　　　　　　　　　　　　　　}.bind(this));

　　　　　　　　　　　　　　　　//接收B组件的数据
　　　　　　　　　　　　　　　　Event.$on('b-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.b=a;
　　　　　　　　　　　　　　　　　　}.bind(this));
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};

　　　　　　　　window.onload=function(){
　　　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　　　　　　　　　'com-a':A,
　　　　　　　　　　　　　　　　　　　　　　　　'com-b':B,
　　　　　　　　　　　　　　　　　　　　　　　　'com-c':C
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　});
　　　　　　　　};
　　　　</script>

<body>
　　　<div id="box">
　　　　　　<com-a></com-a>
　　　　　　<com-b></com-b>
　　　　　　<com-c></com-c>
　　</div>
</body>

vue2.0 组件通信的更多相关文章

  1. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  2. vue2.0组件通信小总结

    1.父组件->子组件 父组件 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替 ...

  3. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  4. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  5. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  6. Vue2.0组件之间通信（转载）

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  7. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  8. v2.0 组件通信的总结

    在vue.js现在比较流行,层出不穷的js框架越来越强调数据绑定,组件化开发. 正在给公司做一个管理后台,基本思路是编写几个通用组件,采用单页面应用的形式完成: 结构大致如下: mainVue lef ...

  9. Vue2.0组件实现动态搜索引擎（一）

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

随机推荐

  1. MVC不用302跳转Action,内部跳转

    原理,在一个Action里面return 另一个Action出去. public class HomeController : Controller { // GET: Home public Act ...

  2. [译]Selenium Python文档：三、导航控制

    你使用WebDriver要做的第一件事就是访问一个链接.一般通过调用get方法来实现: driver.get("http://www.baidu.com") 在将控制权返给你的脚本 ...

  3. shell脚本监控目录下文件被篡改时报警

    思路: 目录下文件被篡改的几种可能: 1.被修改 2.被删除 3.新增文件 md5命令详解 参数: -b 以二进制模式读入文件内容 -t 以文本模式读入文件内容 -c 根据已生成的md5值,对现存文件 ...

  4. [编织消息框架][JAVA核心技术]jdk动态代理

    需要用到的工具  jdk : javac javap class 反编译 :JD-GUI http://jd.benow.ca/ import java.lang.reflect.Invocation ...

  5. juddi学习一

    一.下载juddi 地址:https://mirrors.tuna.tsinghua.edu.cn/apache/juddi/juddi/3.3.4/ 二. 解压下载文件打开目录下的 进入bin目录, ...

  6. 自己写的一个 java swing 的闹钟

    上一周新入职,把代码down下来之后,领导和我讲了一些大概的业务以及代码流程(领导是技术出身),领导让我自己先看看代码,然后我看了两天,觉得已经完全可以接任务了,但是领导却迟迟没有分配任务给我,虽然他 ...

  7. java中的==、equals()、hashCode()源码分析

    转载自:http://www.cnblogs.com/xudong-bupt/p/3960177.html 在Java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际 ...

  8. 体验VS2017的Live Unit Testing

    相对于传统的Unit Test,VS2017 带来了一个新的功能,叫Live Unit Testing,从字面意思理解就是实时单元测试,在实际的使用中,这个功能就是可以在编写代码的时候进行实时的bac ...

  9. css锚点ios不兼容的方法

    css锚点的正常方法: <a href="#1f"></a> <a name="1f"></a> ios出现的问 ...

  10. [Python Web]配置 nginx 遇到错误排查（初级）

    配置 nginx 遇到错误排查(初级) 系统版本:ubuntu 14.04,nginx 版本:nginx/1.4.6 (Ubuntu) 本文不是一步步搭建 nginx 的过程,而是我在使用 nginx ...