组件通信：
　　　　子组件要想拿到父组件数据 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. css-dialog样式实现弹框蒙层全屏无需JS计算高度兼容IE7

    <!DOCTYPE html><html><head>  <meta charset="UTF-8">  <title> ...

  2. Struts2之Action与配置文件

    一.Struts2配置文件 1.struts.properties 在学习Action之前先学下Struts2的配置文件,与Struts2相关的配置文件有好几个,常用的有Struts.xml,web. ...

  3. Docker remote API简单配置使用

    1.启动docker remote API的方式如下: docker -d -H uninx:///var/run/docker.sock -H tcp://0.0.0.0:5678 2.但是为了伴随 ...

  4. 使用cmd命令打开Python文件式程序方法

    首先:需要确定已编好的Python程序的存储路径:(即在哪个磁盘,哪个文件中) 其次:打开cmd命令,输入该程序所在磁盘,敲回车键:(例如其存储在E盘,则输入“E:”,敲回车键.) 然后:输入pyth ...

  5. sui的一些方法封装

    + function($) { "use strict"; var today = new Date(); var getDays = function(max) { var da ...

  6. Java设计模式GOF之单例模式

    一.单例模式(Singleton) 1.单例模式应用场景: ①Servlet ②任务管理器 ③链接池 ④Spring中每个 bean 默认是单例 ⑤网站计数器 2.单例要求 ①构造器私有 ②私有的静态 ...

  7. Struts2的类型转换（上）

    传统的类型转换.(略) Struts2中提供了内置的基本的类型转换器,可以实现基本类型的自动转换,包括: Integer, Float, Double, Decimal Date and Dateti ...

  8. 【Egret】里使用audio标签达到默认播放背景音乐

    方法一 <audio id="bgmMusic" style="position:absolute;" src="resource/assets ...

  9. 程序员的基本功之Java集合的实现细节

    1.Set集合与Map 仔细对比观察上面Set下和Map下的接口名,不难发现它们如此的相似,必有原因 如果只考察Map的Key会发现,它们不可以重复,没有顺序,也就是说把Map的所有的Key集中起来就 ...

  10. （转）Java并发编程：并发容器之CopyOnWriteArrayList

    原文链接:http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开始大家都在共享同一个内容, ...