美文网首页Vue
vue中的组件通信

vue中的组件通信

作者: GOD_4239 | 来源:发表于2020-03-03 19:32 被阅读0次
一、组件通信(组件传值)
1.1父子组件通信
父组件
<子组件标签 :变量='要传递的数据'></子组件标签>
子组件
props:['变量']
1.2子父组件通信
父组件
<子组件标签 @自定义事件='事件名'></子组件标签>
methods:{
  事件名(e){
    //e就是传递过来的数据
  }
}
子组件
子组件中要有一个触发事件
<button @click='toFather'></button>
methods:{
  toFather(){
    this.$emit('自定义事件名称','要传递的数据')
  }
}

1.3非父子组件通信(兄弟组件通信)
定义一个中央事件总线(中转站)
let EventBus = new Vue() 
兄弟A中
created(){}
或者
mounted(){
  EventBus.$on('暗号',(d)=>{
    //d就是传递过来的数据
  })
}
兄弟b中
兄弟b中要有一个触发事件
<button @click='toFather'></button>
methods:{
  toFather(){
    EventBus.$emit('暗号','要传递的数据')
  }
}

相关文章

  • Vue组件通信

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

  • Vue.js基础(二)

    1. 组件之间的通信 向子组件中传递 number=99 子组件a.vue中 执行效果 2. 组件之间的通信 - ...

  • Vue之数据通信

    Vue 如何实现组件通信?①父组件向子组件通信(props:['属性名']) 给父组件中的子组件标签绑定属性,然后...

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

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

  • Vue入门-实现一个简陋的todolist

    Vue中通过props和$emit实现父子组件的通信。

  • vue组件之间通信

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

  • Vue相关知识点

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

  • 面试题整理

    vue vue中8种组件通信方式[https://juejin.cn/post/68449038871623106...

  • vue文档集合

    Vue2使用笔记3--父子组件的通信Vue 2.0开发实践(组件间通讯)Event Bus 在Vue中的使用vue...

  • vue Bus总线

    vue中我们经常遇到组件之间的通信,通常的通信方式有 父 → 子、子 → 父、兄弟组件 之间的通信。通常处理方式...

网友评论

    本文标题:vue中的组件通信

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