组件之间的通信：
一个组件被调用，那么里面的数据就需要从前者调用，
因为在开发中组件时重复调用的，在页面中会反复使用，但是里面的数据是不一样的，
谁调用这个组件谁就传递数据给这个组件，
所以就要暴露一些接口，供外界传递数据，这就是组件之间的通信。

组件实例的作用域是孤立的/每个组件都是独立的，
这意味着不能并且不应该在子组件的莫版内直接引用父子组件的数据
但是父子组件之间需要通信：
父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件
父组件想要和子组件之间产生通信，想要一个机制来完成

在vue.js中，父子组件的关系可以总结为 props down （传下去）/ events up（传上来）
父组件通过 props向下传递数据给子组件
子组件通过 events给父组件发送消息
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="../../vue.js"></script>

 </head>

 <body>

 <div id="app">

     <!-- 父组件-->

     <!--这个时候无论复制多少个组件，里面的内容都是一样的-->

     <!--在开发中，每个组件的内容应该是不相同的，这就意味着在父组件调用的时候把数据传递过来-->

     <!--.hj 与4对应-->

     <!--多个属性用空格隔开 hj="宇轩" imgsrc="" title="" ...-->

     <my-div hj="宇轩"></my-div>

     <my-div hj="叶孤城"></my-div>

     <my-div hj="北京"></my-div>

 </div>

 <!---->

 <template id="mu-div">

     <!--.hj 与 5对应-->

     <p>{{hj}}</p>

 </template>

 </body>

 <script>

     //1.创建组件

     Vue.component('my-div',{

         template:'#mu-div',

         props:['hj'],  //4.声明，父组件传递给子组件，(vue中不支持驼峰慢慢),多个属性用,号隔开

         data(){

             return{

                 hj:'西门吹雪'

             }

         }

     });

     var vm = new Vue({

         el:'#app',

         data:{}

     })

 </script>

 </html>

vue-组件之间的通信：的更多相关文章

  1. vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）

    vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...

  2. vue组件之间的通信

    1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...

  3. vue组件之间的通信，父子之间的数据通信

    父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...

  4. vue 组件之间 的通信

      组件之间通信: 同级组件之间通信:两个组件定义应用到同一个vue实例之下: <div id="webapp" class="box">    & ...

  5. vue组件之间的通信， 父子组件通信，兄弟组件通信

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...

  6. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  7. vue组件之间的传值——中央事件总线与跨组件之间的通信（$attrs、$listeners）

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  8. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  9. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

  10. Vue组件以及组件之间的通信

    一.组件的注册 1. 全局组件注册 1. 注册基本语法Vue.component Vue.component("my_header", { template: `<div&g ...

随机推荐

  1. Python爬虫实战——反爬机制的解决策略【阿里】

    这一次呢,让我们来试一下"CSDN热门文章的抓取". 话不多说,让我们直接进入CSND官网. (其实是因为我被阿里的反爬磨到没脾气,不想说话--) 一.URL分析 输入" ...

  2. nodejs 模板引擎jade的简单使用(2)

    1.jade html head style body div.box div#div1 div aaa div(class="aaa left-warp active") div ...

  3. redis集群添加新节点

    一.创建节点(接上文) 1.在H1服务器/root/soft目录下创建7002目录 2.将7001目录的配置文件redis.conf拷贝到7002,并修改配置文件的端口 3.进入 redis-5.0. ...

  4. 让微信小程序每次请求的时候不改变session_id的方法

    让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...

  5. 从文本文件hello.txt到可执行文件hello

    第一阶段 使用编辑器编写的源代码 (.txt) 文件 hello.c.经过 Pre-processor 进行前处理.在前处理阶段,当 pre-processor 读到代码中的#include<s ...

  6. rabbitmq使用延迟时报异常

    声明交换机为延迟时报异常( unknown exchange type 'x-delayed-message')的解决方法 服务端需下载安装插件: 1.下载插件包 2.将下载后的插件包移至服务安装目录 ...

  7. 关键字this super final static

    this关键字 1.this代表通过当前类实例化成的对象. 2.通过this来获取当前类的属性和方法 3.通过this和区分成员变量和局部变量 4.通过this(参数),调用当前类的构造方法 注意:通 ...

  8. 【索引】位图BitMap索引

    位图(BitMap)索引 前段时间听同事分享,偶尔讲起Oracle数据库的位图索引,顿时大感兴趣.说来惭愧,在这之前对位图索引一无所知,因此趁此机会写篇博文介绍下位图索引. 1. 案例 有张表名为ta ...

  9. css3布局篇（双飞翼）

    大家看到好多电商网站都见过经典三列布局,它也叫做圣杯布局 ,是Kevin Cornell在2006年提出的一个布局模型概念,这个在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它 ...

  10. 深入理解js——构造函数的继承

    看了阮一峰的网络日志(http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_inheritance.html),记录一下构 ...