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

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

在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. Java优化性能

    尽量在合适的场合使用单例使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面:第一,控制资源的使用,通过线程同步来控制资源的并 ...

  2. 初撩RESTful

    1. 什么是RESTful? 一种软件架构风格,设计风格,用于客户端和服务端交互类的架构. 一组架构约束条件和原则 2. 什么是RESTful架构? 客户端通过http动词(get/post等)对服务 ...

  3. MySQL数据库操作：“增删改查”，忘记密码重置等。

    [注] 数据库的“增删查改”,参考原作者Wid:http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html#d11.感谢大佬们的技术分享 ...

  4. leetcode-回溯②-难题

    题10: 回溯:另:动态规划复杂度更低 class Solution: def isMatch(self, s: str, p: str) -> bool: def helper(s,p): i ...

  5. Vue学习笔记【20】——Vue中的动画（使用动画钩子函数）

    定义及使用钩子函数 定义 transition 组件以及三个钩子函数:  <div id="app">    <input type="button&q ...

  6. JZOJ4605. 排序（线段树合并与分裂）

    题目大意: 每次把一个区间升序或降序排序,最后问一个点是什么. 题解: 如果只是问一个点,这确乎是个经典题,二分一下答案然后线段树维护01排序. 从pty那里get到了可以用线段树的合并与分裂实时地维 ...

  7. 莫队算法 sqrt(n)分块思想

    在此说一下本渣对莫队算法思想的一些浅薄理解 莫队算法的思想就是对真个区间的分块,然后按照每块来分别进行计算,这样最终的复杂度可以达到n*sqrt(n) 小Z的袜子是一道非常经典的题目.:题目链接htt ...

  8. iphone5越狱后问题的解决办法

    1,添加各种源失败,显示红字. 解决办法: 如果出现bad 404等红字,一般是由于网络问题,服务器挤爆了,导致不能添加,这种情况大家可以换一个时间段添加源,或者使用网速快一点的网络,比如3g,多试几 ...

  9. C语言新手写扫雷攻略3

    界面绘制好后,雷数也布置了,接下来就是游戏的运行过程了,今天先不说具体过程,再来看看需要用到的辅助函数 先是简单的画红旗,鼠标右键的功能是画红旗,至此我们都是在使用函数自己绘图,效率是低,但有助于理解 ...

  10. Java学习之集合（List接口）

    List特有的常见方法:有一个共性特点:都可以操作角标 1.添加  void add(int index, E element); void addAll(int index, collection& ...