美文网首页
Vue组件通信

Vue组件通信

作者: leap_ | 来源:发表于2019-10-23 14:32 被阅读0次

父组件传值子组件

<counter :count=”1”></counter>   

var vm = new Vue({
props:[“count”],  //子组件需要声明接收的prop属性名称
template:’<div>{{count}}</div>’  // 使用
})

子组件传值父组件


<child @delete="handleDelete"></child>      // 父组件接收delete事件

Vue.component("child",{
  template:’<div @click='sendToFather'>子传值给父</div>’,
  methods:{
    sendToFather:function(){
      this.$emit('delete',12)   // 向上发送一个delete事件,传入12
    }
  }
})

非父子组件通信

发布订阅模式 / 总线模式

我们使用一个空的Vue实例作为总线。

Vue.prototype.bus = new Vue()

通过总线发送和接收事件

  Vue.component('child-emit',{
      Template : ’<div @click=”handleChildClick”>发送</div>’,
      Methods:{
        handleChildClick:function(){
          this.bus.$emit('change',123)   // emit 发送key为change的值
          }
      }
  })
     Vue.component('child-on',{
       Template : ’<div>接收</div>’,
       Mount:function(){
          var that = this
          This.bus.$on(‘change’,function(msg){
       //  on 接收key为change的值,传入回调函数   msg = 123
          })               
        }
  })

相关文章

  • 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/suqkvctx.html