美文网首页
vue组件通信

vue组件通信

作者: Poiey | 来源:发表于2020-01-26 17:13 被阅读0次

组件之间的关系

  1. new Vue就可以看成根组件,每个文件的根组件是唯一的
  2. 其余的组件在注册(定义)的时候不能知道他们的关系的。只有在使用时才能知道。(例如:父子组件,兄弟组件等)

组件的通信

  • 父到子的传递是通过props这个属性传递参数来实现
  1. 静态传值使用props传递
  2. 动态传值使用v-band来绑定数据,进行传值
  3. 通过$refs来进行传值,对子组件添加编辑ref
  • 子到父的传递
  1. 通过this,$emit (‘自定义事件的名字’, 触发这个事件时传递过去的参数)
  2. 父组件收到子打来的事件的话,需要在调用儿子组件的时候,通过 v-on 去监听那个自定义事件
  3. 然后父组件就在那个事件处理函数中做需要做的事情
    *注意:触发事件事如果携带了参数,那么在绑定事件时是通过event接收到的。
  4. 普通事件,event就是事件对象(事件后面没带( )默认是 event 事件)
  5. 自定义事件, $sevent就是传递过去的参数(带括号的)
  • 兄弟关系
  • 其余复杂关系

** 中央事件总线(bus)** ( 组件与组件之间传值 )
应用场景:在vue项目没那么庞大的时候使用,vue大型项目还是用vuex
第一步 : 新建一个Bus.vue 文件 ,这里主要是默认导出一个vue实例,
第二部 : 新建一个组件A import bus from 'Bus.vue' (导入) 这里通过 Bus.emit 来传递数据, 第三步 : 新建一个组件B import bus from 'Bus.vue' (导入) 这里通过 Bus.on 来接受传递过来的数据

const bus = new Vue();

非props特性

调用组件时传递的参数,如果在这个组件内部没有通过props选项去定义的话,那么这个Prop就叫做非props特性
非props特性的一 些规则:
1.会自动添加到组件的根元素上(继承)
2.普通的非Props特性都是替换,但class与style是拼接
3.禁用继承inheritAttrs class与style是禁用不了的设置 inheritAttrs = false
4.可以在组件内通过this.$attrs获取到非Props特性,class与style不在此列

相关文章

  • vue组件之间通信

    vue 组件之间通信 vue组件之间通信方式: 1.父组件通过props向下传数据给子组件,子组件通过$emit事...

  • 【Vue】组件通信(任意通信)

    本节所需的基础知识: 【Vue】组件通信(父传子props) 【Vue】组件通信(子传父$emit) 任意组件相互...

  • vue 组件通信方式 ,父子、隔代、兄弟 三类通信,六种方法

    Vue 组件间通信只要指以下 3 类通信:父子组件通信、隔代组件通信、兄弟组件通信,下面分别介绍每种通信方式且会说...

  • Vue相关知识点

    1、vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不...

  • Vue如何实现组件通信?

    Vue组件通信的三种情况: 父子通信 爷孙通信 兄弟通信 父子通信:父组件使用Prop向子组件传递数据,子组件通过...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • Vue组件通信

    Vue组件通信 Vue组件关系可分为三大类: 父子组件 兄弟组件 跨级组件, 相应的组件之间的通信也分类三大类: ...

  • vue组件间通信的一些实用方法(VUE2.x)

    vue组件间通信的一些实用方法(VUE2.x) 一、父子组件间通信 常用的父子组件通信方法,一般涉及props和$...

  • vue组件通信(传值)

    1.父子通信 1.父组件(parent.vue) 子组件(child.vue) 2.子父通信 1.子组件(chil...

  • Vue组件通信

    总体来说,Vue中组件之间的通信场景如下图: 可以将其分为父子组件通信、兄弟组件通信、跨级组件通信。 1. 自定义...

网友评论

      本文标题:vue组件通信

      本文链接:https://www.haomeiwen.com/subject/iywjthtx.html