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

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

在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. Ubuntu系统管理systemd

    systemctl命令 systemctl list-units - 列出所有jobs/serviceList all units (where unit is the term for a job/ ...

  2. PHP ftp_pasv() 函数

    定义和用法 ftp_pasv() 函数把被动模式设置为打开或关闭. 在被动模式中,数据连接是由客户机来初始化的,而不是服务器.这在客户机位于防火墙之后时比较有用. 语法 ftp_pasv(ftp_co ...

  3. luoguP2709 小B的询问 [莫队]

    题目描述 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值从1到K,其中c(i)表示数字i在[L..R]中的重 ...

  4. mysql|tomcat|nginx|redis在docker中的部署

    MySQL部署 拉取MySQL镜像 docker pull mysql 查看镜像 创建MySQL容器 docker run -di --name pinyougou_mysql -p 33306:33 ...

  5. Web移动端常见问题-摘抄

      一.按钮点击时出现黑色背景 解决方法: 1 2 .class { -webkit-tap-highlight-color:rgba(0,0,0,0);} .class { -webkit-appe ...

  6. Python语法基础03(if语句,while循环与for循环)

    if语句:语法:单分支if 判断条件:语句块 执行过程:首先执行判断条件,当条件成立则执行判断条件下面的语句块,若条件不成立,则不执行 双分支if 判断条件:语句块1else:语句块2执行过程: 首先 ...

  7. LInux文件基础知识和文件目录操作（系统调用函数方式）

    1.进程是处于活动状态的程序,某个用户通过操作系统运行程序所产生的进程代表着该用户的行为.如果用户不具备访问某个目录和文件的权限,那么该用户的进程也不能访问. 2.Linux系统中文件安全机制是通过给 ...

  8. C语言变长参数实现

    #include<stdio.h> #include<string.h> #include<stdarg.h> /***编写可变长参数列表的函数案例*/ /* vo ...

  9. 如何扫描统计全国Telnet默认口令

    如何扫描统计全国Telnet默认口令 zrools2016-01-21共339474人围观 ,发现 23 个不明物体系统安全终端安全 本文原创作者:zrools 本文中介绍的工具.技术带有一定的攻击性 ...

  10. 剑指offer第二版面试题2：数组中重复的数字（JAVA版）

    题目:在一个长度为n+1的数组里的所有数字都在1~n的范围内,所以数组中至少有一个数字是重复的.请找出数组中任意一个重复的数字,但是不能修改输入的数组.例如,如果输入长度为8的数组{2,3,5,4,3 ...