三、组件间通信（$parent $refs）

父组件要想获取子组件的数据：
①在调用子组件的时候，指定ref属性
<child-component ref="mySon"></child-component>

②根据指定的引用的名字 找到子组件的实例对象
this.$refs.mySon

子组件要想获取父组件的数据：
①直接读取
this.$parent

：：：通过this.$refs拿到子组件的数据

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>组件间通信-01</title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.   <div id="container">
  10.         <p>{{msg}}</p>
  11.         <dahua></dahua>
  12.     </div>
  13.     <script>
  14.     //vue提供的ref
  15.         Vue.component("dahua",{
  16.             data:function(){
  17.                 return{
  18.                     mySonName:""
  19.                 }
  20.             },
  21.             methods:{
  22.             //通过$refs拿到指定的所引用的对应的组件的实例对象
  23.                 getSonName:function(){
  24.                     this.mySonName = this.$refs.mySon.name;
  25.                 }
  26.             },
  27.             template:`
  28.                 <div>
  29.                     <h1>这是父组件</h1>
  30.                     <button @click = "getSonName">获取子组件数据</button>
  31.                     <span>{{mySonName}}</span>
  32.                     <hr>
  33.                     <xiaohua ref="mySon"></xiaohua>
  34.                 </div>
  35.             `
  36.         })
  37. //    创建子组件
  38.         Vue.component("xiaohua",{
  39.             data:function(){
  40.                 return{
  41.                     name:"小花"
  42.                 }
  43.             },
  44.             template:`
  45.                     <h1>这是子组件</h1>
  46.             `
  47.         })
  48.         new Vue({
  49.             el:"#container",
  50.             data:{
  51.                 msg:"Hello VueJs"
  52.             }
  53.         })
  54.     </script>
  55.  </body>
  56. </html>

子组件通过$parent获取父组件的数据

  1. <!doctype html>
  2. <html>
  3.  <head>
  4.   <meta charset="UTF-8">
  5.   <title>组件间通信-02</title>
  6.     <script src="js/vue.js"></script>
  7.  </head>
  8.  <body>
  9.   <div id="container">
  10.         <p>{{msg}}</p>
  11.         <dahua></dahua>
  12.     </div>
  13.     <script>
  14.         //创建子组件
  15.         Vue.component("dahua",{
  16.             data:function(){
  17.                 return{
  18.                     myName:"大花"
  19.                 }
  20.             },
  21.             template:`
  22.                 <div>
  23.                     <h1>这是父组件</h1>
  24.                     <hr>
  25.                     <xiaohua></xiaohua>
  26.                 </div>
  27.             `
  28.         })
  29.         //创建子组件
  30.         Vue.component("xiaohua",{
  31.             data:function(){
  32.                 return{
  33.                     msg:""
  34.                 }
  35.             },
  36.             template:`
  37.                 <div>
  38.                         <h1>这是子组件</h1>
  39.                         <p>{{msg}}</p>
  40.                 </div>
  41.             `,
  42.             created:function(){
  43.                 //在子组件创建完成时获取父组件的数据
  44.                 //保存在msg中在p标签中显示
  45.                     this.msg = this.$parent.myName;
  46.             }
  47.         })
  48.         new Vue({
  49.             el:"#container",
  50.             data:{
  51.                 msg:"Hello VueJs"
  52.             }
  53.         })
  54.     </script>
  55.  </body>
  56. </html>

vue组件父子间通信02的更多相关文章

  1. vue组件父子间通信之综合练习--假的聊天室

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

  2. Vue组件父子间通信01

    子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...

  3. Vue组件实例间的直接访问

    前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...

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

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

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

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

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

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

  7. vue父子间通信案列三($emit和prop用法)

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

  8. vue父子间通信

    父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...

  9. vue组件之间的通信

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

随机推荐

  1. ioncube扩展的安装详细图文教程，适合所有新手

    有些程序在php环境下运行需要安装ionCube Loader的扩展支持,这里跳过介绍这些东西直接说一下怎么让你的主机环境支持这种扩展,顺利的让你的程序运行起来!这个教程适合用云服务器或者独立服务器的 ...

  2. STM32 GPIO相关

    1. STM32 的 IO 作为输入的时候,可以程序设置上下拉电阻(可以不用外接上下拉电阻). 2.GPIO有四种输入模式:浮空输入.上拉输入.下拉输入.模拟输入: 3.GPIO有四种输出模式:开漏输 ...

  3. 机器学习分类算法之K近邻（K-Nearest Neighbor）

    一.概念 KNN主要用来解决分类问题,是监督分类算法,它通过判断最近K个点的类别来决定自身类别,所以K值对结果影响很大,虽然它实现比较简单,但在目标数据集比例分配不平衡时,会造成结果的不准确.而且KN ...

  4. css多种方式实现双飞翼布局

    圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果是一样一样的.圣杯布局.双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100% 圣杯布局 <style> *{ ma ...

  5. eclipse中export 的jar file与 runnable jar file的区别

    (1)直接运行 .class的方法     java  -cp .  com.guangfa.demo1  , 不用加.class后缀 .-cp 是 -classpath 缩写,是指定类运行所依赖其他 ...

  6. 049：ORM常用Field详解（1）

    常用字段: 在 Django 中,定义了一些 Field 来与数据库表中的字段类型来进行映射.以下将介绍那些常用的字段类型. AutoField: 映射到数据库中是 int 类型,可以有自动增长的特性 ...

  7. 密码技术之密钥、随机数、PGP、SSL/TLS

    第三部分:密码技术之密钥.随机数.PGP.SSL/TLS 密码的本质就是将较长的消息变成较短的秘密消息——密钥. 一.密钥 什么是密钥? (1)密钥就是一个巨大的数字,然而密钥数字本身的大小不重要,重 ...

  8. React Native 中 跨页面间通信解决方案之 react-native-event-bus

    https://github.com/crazycodeboy/react-native-event-bus 用法: A页面和B页面中都有相同的列表,点击B页面中的收藏按钮,A页面会跟着更新 impo ...

  9. Bugku 杂项 隐写

    隐写 下载后打开压缩包发现是一张图片 用winhex打开 图中红色框内是PNG的PE头 在IHDR后面的八个字节(黄色框部分)为该图片的长度.宽度信息 将黄色框内最后一个字节由A4改为F4后另存为图片 ...

  10. makefile 打印

    $(warning ----------$(abc)) $(info -----------------$(abc))