Vue组件之间通信

840阅读 0评论2020-06-19 fengqiyunyong123
分类:JavaScript

      Vue做开发项目时经常用到组件的互相调用, 组件调用如何函数调用一样,相当方便,同时也相当频繁。
     这里介绍常用的三种组件通信的方式。
     一、 父组件向子组件传数据,这种情况多用于由父组件收集获取数据,传递给子组件,子组件根据数据形成相应的展示样式。
      举例:  parent.vue
     

点击(此处)折叠或打开

  1. <children :data='mess'></children>    对子组件的引用,将数据mess传输给子组件children中的data变量
  2.     
  3.     data() {
  4.         return {
  5.             mess: {
  6.                 'label': 'label',
  7.                 'value': 'value'
  8.             }
  9.         }
  10.     }
         children.vue  
       

点击(此处)折叠或打开

  1. children.vue               
  2.    {{ mess.label }}
  3.    {{ mess.value }}            
  4.      
  5.     props : {
  6.         data: {                         定义接受数据 data的数据类型和默认值  接收值都定义在props
  7.             type: Object,
  8.             default: {
  9.                 'label': 'label1',
  10.                 'value': 'value1',
  11.             }
  12.         }
  13.     }
   

    二、子组件向父组件传数据,通过触发事件向父组件发送数据,多用于检索,查询
       parent.vue
       

点击(此处)折叠或打开

  1. <children @childrenclickQuery=ParentclickQuery></children>       父组件调用子组件,定义ParentclickQuery函数

  2.     ParentclickQuery(data) {
  3.         this.msg = data            // data就是子组件传递的数据 data = {'label': 'label','value': 'value'}
  4.     }
     children.vue 

   

点击(此处)折叠或打开

  1. children.vue

  2.     <button @keyup.enter.native=clickQuery>传递参数</button>      定义按钮事件名为 clickQuery
  3.     
  4.     data() {
  5.         return {
  6.             msg: {
  7.                 'label': 'label',
  8.                 'value': 'value'
  9.             }
  10.         }
  11.     }
  12.     clickQuery() {
  13.         this.$emit('childrenclickQuery', this.msg) // 触发当前组件事件,并传递参数, 触发父组件中的 childrenclickQuery事件,同时为事件传递参数,父组件中通过事件接受参数   
  14.     }

    三、兄弟组件之间传参数, 当组件之间互不调用,但是却要传参数的情况, 一般多在两个组件同属一个父组件
    
    原理:   通过第三方实, 组件接收方开启监听事件,组件发送方触发事件,触发时带上参数。必须同一个vue实例才能进行监听和触发。
   
    这时候需要实例化一个三方vue实例进行传输   let vm = new Vue()
   
    传数据组件方

点击(此处)折叠或打开

  1. <button @click=ge></button>   // 

  2. methods: {
  3.     ge() {
  4.         vm.$emit('blur','messages1') // 组件触发     触发blur事件,带上参数messages1
  5.     }
  6. }

   接受数据组件
    

点击(此处)折叠或打开


  1. created() {
  2.     vm.$on('blur',(arg) => {        // 新建一个监听事件   blur,接受一个参数args并获取, 必须在事件触发前开启监听,这里放在实例创建时启动监听
  3.         this.test = arg             // arg 就是  messages1
  4.     })
  5. }

   以上就是vue常用的三种组件之间通信的情况。
    





上一篇:部署django+nginx实现ws/wss的websocket生产环境通信
下一篇:django-rest-framework请求方法封装,和各种方法数据的传递