首页 > 其他分享 >vue 组件之间的传值

vue 组件之间的传值

时间:2022-12-20 15:44:34浏览次数:74  
标签:vue parent eventName Vue child 组件 children 传值

$dispatch 只会通知自己的父亲,父亲的父亲,父亲的父亲

eventBus 所有的父组件和子组件

main.js 全局注册

    // 向上通知
    Vue.prototype.$dispatch = function (eventName,value) {
          let parent = this.$parent
          while(parent) {
           parent.$emit(eventName,value)
            parent = parent.$parent
          }
    }
// 向下传递
Vue.prototype.$broadcast = function (eventName,value) {
  // 获取当前组件下的所有的孩子
  const broadCast = (children) => {
    children.forEach(child => {
      child.$emit(eventName,value)
      if (child.$children) {
        broadCast(child.$children)
      }
    });
  }

  broadCast(this.$children)
}

$attrs表示的是属性的集合

v-bind="$attrs" 传递传过来的所有的值给下一个组件

$listeners表示的是方法的集合

v-on="$listeners" 传递传过来的所有的方法给下一个组件

eventBus 定义到全局上

Vue.prototype.$bus = new Vue()

this.$bus.$on('绑定的事件', function () {

})

this.$bus.$emit('触发绑定的事件',XXX)

 

标签:vue,parent,eventName,Vue,child,组件,children,传值
From: https://www.cnblogs.com/loveMis/p/16994329.html

相关文章

  • SpringBoot - @Configuration,@Bean,@Scope 组件注入容器
    @Configuration作用:声明一个类为配置类,替代之前使用的xml文件范围:类上参数:proxyBeanMethods:boolean(default=true) 基本使用:注册一个类到IOC容器中@Configuration......
  • 从面试题入手,畅谈 Vue 3 性能优化
    前言今年又是一个非常寒冷的冬天,很多公司都开始人员精简。市场从来不缺前端,但对高级前端的需求还是特别强烈的。一些大厂的面试官为了区分候选人对前端领域能力的深度,经常......
  • vant移动端日历组件如何设置后端传过来的日期才可选
    1<template>2<divid="homeBox">3<van-celltitle="选择多个日期"@click="show=true"/>4<van-calendar5v-model="show"6:for......
  • django组件使用
    django内置序列化组件(drf前身)'''前后端分离的项目视图函数只需要返回json格式的数据即可'''fromapp01importmodelsfromdjango.httpimportJsonResponsedefa......
  • Vue
    数据绑定最常见的形式就是使用“Mustache”语法(双大括号)的文本插值:双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML,你需要使用v-html指令<spanv......
  • Vue.js:el-input自动获取焦点通过自定义指令实现v-focus
    文档https://v2.cn.vuejs.org/v2/guide/custom-directive.html使用el-input组件提供的参数autofocus自动获取焦点,效果不是很好Vue.js2官网提供的示例importVuefr......
  • Vue的computed和watch的区别是什么?
    一、computed介绍computed用来监控自己定义的变量,该变量在data内没有声明,直接在computed里面定义,页面上可直接使用。//基础使用{{msg}}<inputv-model="name"/>......
  • 校招前端二面高频vue面试题(边面边更)
    Vue中封装的数组方法有哪些,其如何实现页面更新在Vue中,对响应式处理利用的是Object.defineProperty对数据进行拦截,而这个方法并不能监听到数组内部变化,数组长度变化,数组的......
  • VUE项目无法启动NODE版本与NODE-SASS、SASS-LOADER版本不兼容解决方案
    一、错误分析在VUE项目开发中,我们经常会遇到报错:NodeSassversion7.0.1isincompatiblewith^4.0.0。网上解决方案也千奇百怪,最终操作下来,也是搞了个寂寞,项目依旧无......
  • 通过读取ts注释,生成组件文档系统
    这篇是对我之前写的【从0到1开发一个自己的ui库】的一个补充,之前只写了自定义开发一个ui库,现在对自己开发的ui库进行ts注释解析,然后生成一个文档说明。先呈现这个文档系统......