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

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

在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. 通信矩阵转DBC

    DBC的制作对于一些人来时比较陌生,熟悉的人做他感觉浪费时间(像我这样的),于是自己用PYTHON写了一个脚本,还挺好用的,只需要填写表格就好了,省出来大部分的时间. 分享下思路, 来看下DBC的文本 ...

  2. Java异常架构与异常关键字

    Java异常简介 Java异常是Java提供的一种识别及响应错误的一致性机制. Java异常机制可以使程序中异常处理代码和正常业务代码分离,保证程序代码更加优雅,并提高程序健壮性.在有效使用异常的情况 ...

  3. 读取Properties

    package com.infotech.common.util; import java.io.FileNotFoundException; import java.io.IOException; ...

  4. delphi 设备函数GetDeviceCaps函数

    {说明:以下内容来源于网络,修改多处错误所得 2019.10.04 } GetDeviceCaps 函数功能:该函数检索指定设备的设备指定信息.该函数经常用在操作打印机等设备中.函数原型:int Ge ...

  5. Java——异常的基本概念

    1.异常的基本概念 1.1什么是异常 在使用计算机语言进行项目开发的过程中,即使程序员把代码写得尽善尽美,在系统的运行过程中仍然会遇到一些问题,因为很多问题不是靠代码能够避免的,比如:客户输入数据的格 ...

  6. redis实现点击量/浏览量

    java+redis实现高性能新闻点击量更新 1.redis简单介绍.它用来做高性能数据存取 是极好的. 2.实例:新闻点击量. 1)每次刷新,我们并不一定要往数据库里面立即更新数据 2)可以在red ...

  7. 【LeetCode 19】删除链表的倒数第N个节点

    题目链接 [题解] 经典的一道题. 让p1指向链表的第一个元素. 让p2指向链表的第二个元素. 然后让他们俩同时往后移动. 直到p2到达链表的尾巴. 这时p1和p2之间总是隔了n-1个元素. 所以p1 ...

  8. 原生Ajax（ XHR 和 Fetch ）

    原生Ajax 基本使用的四大步骤,简单易懂 ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页.接下来通过本文给大家介绍Ajax的使用四大步骤,非常不错,感兴趣的 ...

  9. Ext 面板（Panel）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. php编译安装phalcon框架 - centos

    使用官方的文档安装方式会报错,进行了一些实验,终于安装成功! 安装phalcon前提是需要安装php的pdo,如果使用mysql 需要安装 pdo_mysql 先看下git的版本号git --vers ...