一、父传子，子传孙

　　1. props

　　　　1>在父组件中通过子组件自定义的标签属性来传递数据。

　　　　2>在子组件中通过props声明希望用到的数据

  1.  <body>
  2.      <div id="app">
  3.          <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>
  4.      </div>
  5.      <script src="./node_modules/vue/dist/vue.js"></script>
  6.      <script>
  7.          let vm = new Vue({
  8.              el:"#app",
  9.              data:{
  10.                  msg:"hello yilia"
  11.              },
  12.              methods:{
  13.                  fn(){
  14.                      console.log("father");
  15.                  }
  16.              },
  17.              components:{
  18.                  "my-father":{
  19.                 //     props:['msg1'],
  20.                  //    template:`<div><h1>{{msg1}}</h1><my-son :msg2="msg1"></my-son></div>`,
  21.                     created(){
  22.                         console.log(this.$attrs);
  23.                         console.log(this.$listeners);
  24.                         console.log(this);
  25.  
  26.                     },
  27.                      template:`<div><h1></h1><my-son v-bind="$attrs" v-on="$listeners"></my-son></div>`,
  28.                      data(){
  29.                              return {
  30.  
  31.                              }
  32.                          },
  33.                      components:{
  34.                          "my-son":{
  35.                              props:['msg1'],
  36.                              template:`<p @click="$listeners.click1()">{{msg1}}</p>`,
  37.                              inheritAttrs:true,
  38.                              data(){
  39.                                  return{
  40.                                  }
  41.                              }
  42.                          }
  43.                      }
  44.                  }
  45.              }
  46.          });
  47.  
  48.      </script>
  49.  
  50.  </body>

1.1这里需要注意的props 除了上述这种写法，还可以写成对象形式，来校验数据

  1.  props: {
  2.  a: {
  3.      type: Number,
  4.      default: 10
  5.  },
  6.  b: {
  7.      type: String,
  8.      validator(val) {
  9.          return val>0; // "2">0
  10.      }
  11.  },
  12.  arr: {
  13.      type: Array,
  14.      //假如属性是数组或对象 默认值需要通过函数返回
  15.      default:()=>([1])
  16.  }
  17.  },

2.有时候my-father这块用不到数据，但需要把爷爷的数据传给孙子，可以用$attrs,在 my-son v-bind="$attrs"

this.$attrs 对没有使用的属性保留在this.$attrs (也就是props中没有申明的属性)

  1.  <body>
  2.      <div id="app">
  3.          <my-father :msg1="msg" a="10" :b="20" @click="fn"></my-father>
  4.      </div>
  5.      <script src="./node_modules/vue/dist/vue.js"></script>
  6.      <script>
  7.          let vm = new Vue({
  8.              el:"#app",
  9.              data:{
  10.                  msg:"hello Yilia"
  11.              },
  12.              methods:{
  13.                  fn(){
  14.                      console.log("father");
  15.                  }
  16.              },
  17.              components:{
  18.                  "my-father":{
  19.                   //   props:['msg1'],
  20.                      template:`<div><h1></h1><my-son v-bind="$attrs"></my-son></div>`,
  21.                      data(){
  22.                          return {
  23.                          }
  24.                      },
  25.                      components:{
  26.                          "my-son":{
  27.                              props:['msg1'],
  28.                              template:`<p>{{msg1}}</p>`,
  29.                              inheritAttrs:true, //为false的时候，没有用到的数据不会显示在dom结构上
  30.                              data(){
  31.                                  return{
  32.                                  }
  33.                              }
  34.                          }
  35.                      }
  36.                  }
  37.              }
  38.          });
  39.      </script>
  40.  </body>

二、点击子组件，调用父组件的方法 (想在父组件中绑定原生事件给组件)

1.需要添加修饰符native,不添加就被当作一个属性对待

  1.  <body>
  2.      <div id="app">
  3.          <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
  4.          <my-button @click.native="fn"></my-button>
  5.      </div>
  6.      <script src="./node_modules/vue/dist/vue.js"></script>
  7.      <script>
  8.          let vm = new Vue({
  9.              el: "#app",
  10.              methods:{
  11.                  fn() {
  12.                      console.log("fn() is called");
  13.                  }
  14.              },
  15.              components: {
  16.                  "MyButton": {
  17.                      template: `
  18.                      <div>
  19.                          点我
  20.                      </div>`
  21.                  }
  22.              }
  23.          });
  24.      </script>
  25.  </body>

点击 “点我” 的时候父组件的fn函数被调用。

2.$listeners 绑定所有的方法，直接调用父组件的方法

  1.  <body>
  2.      <div id="app">
  3.          <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
  4.          <my-button @click="fn"></my-button>
  5.      </div>
  6.      <script src="./node_modules/vue/dist/vue.js"></script>
  7.      <script>
  8.          let vm = new Vue({
  9.              el: "#app",
  10.              methods:{
  11.                  fn() {
  12.                      console.log("fn() is called");
  13.                  }
  14.              },
  15.              components: {
  16.                  "MyButton": {
  17.                      mounted(){
  18.                          console.log(this.$listeners);
  19.                          //{click: ƒ}
  20.                      },
  21.                      template: `<div @click="$listeners.click()">点我</div>`
  22.                  }
  23.              }
  24.          });
  25.      </script>
  26.  </body>

3.子组件想调用父组件的方法 $emit

  1> 在子组件中调用$emit()方法发布一个事件
  2> 在父组件中提供一个在子组件内部发布的事件处理函数
  3> 在父组件订阅子组件内部发布的事件
  1.  <body>
  2.      <div id="app">
  3.          <!--想在父组件中绑定原生事件给组件 需要加.native 不加就被当作一个属性看待-->
  4.          <!--<my-button @click.native="fn"></my-button>-->
  5.          <my-button @click="fn" @mouseup="fn"></my-button>
  6.      </div>
  7.      <script src="../01-vue-basic/code/node_modules/vue/dist/vue.js"></script>
  8.      <script>
  9.          // 组件通信 props $emit $attrs $listeners
  10.          /*
  11.             子如何传父
  12.             1 在子组件中调用$emit()方法发布一个事件
  13.             2 在父组件中提供一个在子组件内部发布的事件处理函数
  14.             3 在父组件订阅子组件内部发布的事件
  15.          */
  16.          let vm = new Vue({
  17.              el: "#app",
  18.              data: {
  19.                  content: "点我"
  20.              },
  21.              methods:{
  22.                  fn(num) {
  23.                      console.log(num,"fn() is called");
  24.                  }
  25.              },
  26.              components: {
  27.                  "MyButton": {
  28.                      mounted() {
  29.                          console.log(this.$listeners);// 绑定所有的方法
  30.                      },
  31.                      template: `
  32.                         <div>
  33.                           <button @click="$listeners.click(123);">点我</button>
  34.                           <button @click="$emit('click2',23)">点我</button>
  35.                           <button @click="$listeners.click(123);" @mouseup="$listeners.mouseup(123);">点我</button>
  36.                           <button v-on="$listeners" >点我</button>
  37.                         </div>
  38.                      `
  39.                  }
  40.              }
  41.          });
  42.      </script>
  43.  </body>

　　

vue基础----组件通信（props,$emit,$attrs,$listeners）的更多相关文章

  1. vue 父子组件通信props/emit

    props 1.父组件传递数据给子组件 父组件: <parent> <child :childMsg="msg"></child>//这里必须要 ...

  2. vue基础----组件通信（$parent,$children）

    1.按照dom的父子级关系,在子组件中可以通过$parent 直接调用父组件的方法,也可得到父组件的属性. 2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法 ...

  3. vue 父子组件通信-props

    父组件:引用了ComBack组件 ComBack组件:引用了BasicInfor组件 先使用props获取父组件的headInfo这个对象,这里注意(default)默认返回值要用工厂形式返回 Bas ...

  4. Vue 兄弟组件通信（不使用Vuex)

    Vue 兄弟组件通信(不使用Vuex) 项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下 ...

  5. Vue兄弟组件通信

    Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...

  6. Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）

    Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...

  7. Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  8. vue父子组件通信高级用法

    vue项目的一大亮点就是组件化.使用组件可以极大地提高项目中代码的复用率,减少代码量.但是使用组件最大的难点就是父子组件之间的通信. 子通信父 父组件 <template> <div ...

  9. vue 父子组件通信

    算是初学vue,整理一下父子组件通信笔记. 父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息. 一.父组件向子组件下发数据: 1.在子组件中显式地用props选项声明它预期的数据 ...

随机推荐

  1. import org.apache.commons.codec.binary.Base64;

    import org.apache.commons.codec.binary.Base64;

  2. overflow属性的应用

    在使用JQueryUI chosen插件的时候,由于页面布局的原因,下拉列表框超出div范围,图形效果严重变形,一点解决的思路都没有,最后请教公司前端,瞬间解决,原来使用CSS 中的overflow属 ...

  3. 状压DP小拼盘

    有的DP题,某一部分的状态只有两种,选或不选. 开数组记录,代价太大,转移不方便. 状态压缩意为,用 “0/1“ 表示 “选/不选“ . 把状态表示为二进制整数. There are 10 kinds ...

  4. Git学习笔记（二） · 非典型性程序猿

    远程库的使用 前面说到的都是git在本地的操作,那么实际协作开发过程中我们肯定是要有一个远程版本库作为项目的核心版本库,也就是投入生产使用的版本.这里我们以 Github为例.Github是一个开放的 ...

  5. Flutter Widgets 之 BottomNavigationBar 和 BottomNavigationBarItem

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 BottomNavigationBar 和 BottomN ...

  6. LeetCode--二叉树1--树的遍历

    LeetCode--二叉树1--树的遍历 一 深度遍历 深度遍历里面由 三种遍历方式,两种实现方法.都要熟练掌握. 值得注意的是,当你删除树中的节点时,删除过程将按照后序遍历的顺序进行. 也就是说,当 ...

  7. 从0开发3D引擎（十一）：使用领域驱动设计，从最小3D程序中提炼引擎（第二部分）

    目录 上一篇博文 本文流程 回顾上文 解释基本的操作 开始实现 准备 建立代码的文件夹结构,约定模块文件的命名规则 模块文件的命名原则 一级和二级文件夹 api_layer的文件夹 applicati ...

  8. Enbale IE mode in Edge

    1. 打开Edge, 在地址栏输入 edge://flags/ 2. 搜索 Enable IE Integration , 配置为 IE mode 3. 找到Edge的启动程序路径.如 C:\Prog ...

  9. 移动端轮播图实现方法（dGun.js）

    本文章介绍在移动端无缝隙轮播图实现的原理,这个轮子比较简单,但可以方便刚刚入门的同学参考.最终效果是在移动端无缝隙无限滑动,可以自定义轮播的速度.支持手势左右滑动.最后会放上源码. HTML部分 &l ...

  10. 我折腾的shell笔记

    目录 Mac一些常用的快捷键记录 iTerm2或者命令行相关 Mac桌面上或者某目录下操作 一些实用脚本示例 代码无提示或者其他抽风症状,清除Xcode缓存 查看当前网络ip地址 日常提交推送git代 ...