Vue组件间传值

首先 vue 组件化的一个框架。
既然是组件化。
那么一定存在组件和组件之间传值的问题

在讨论组件和组件怎么传值的问题之前，
可以先看看组件与组价之间有三种关系。

1. 父->子
2. 子->父
3. 平行组件之间传值.

---

1. 父子组件间传值.

一个父组件里面包含了一个子组件,需要把父组件的数据传递给子组件以便于子组件显示.

数据流动方向:父组件数据 -> 子组件

子组件利用绑定属性的方式绑定父组件的数据属性,从而获取父组件的值.

  Vue.component('pview',{
    template:`

    
    
      
    
`,
    data:function(){
      return {
        message:'message in parentView'
      }
    }
  })

  Vue.component('cview',{
    template:`
从父组件获取到的值:{{msg}}
`,
    props:['msg'] // 子组件需要使用 props来接收
  })
  

html

结果:

父->子传值.gif

上述demo中,在子组件的顶级利用 v-bind:表达式绑定父组件的 data 属性.并在子组件内部使用 props 属性来接收这个msg,即可在子组件内部使用{{msg}} or this.msg 了.

补充:

我们可以在子组件标签里使用 v-bind:msg = 父组件数据属性,并子子组件内搭配 props:['msg'] 来获取到从父组件传递过来的属性数据.

子组件扩展属性

这里的子组件扩展属性和父组件就没有关系了,完全是子组件自己的数据行为.

数据流动方向:子组件扩展属性 -> 子组件

Vue.component('selfview', {
    template:` {{outterData}} -- {{innerData}}`,
    props:['outterData'], // 属性扩展都需要些在这里. *** 注意,扩展属性写的是 outter-Data ,这里写的是 outterData .
    data:function() {
      return {
        innerData:'这是组件自己内部的数据属性字段'
      }
    }
  })
  
  
  
  
  

html

结果:

子组件自己的普通扩展属性，注意命名方式

总结:

• 在子组件顶级标签里可以使用 :msg='父组件属性'(v-bind:不要忘记冒号) & props['msg'] 的方式拿到父组件属性数据.
• 也可以完全扩展一个属性自己的数据属性 msg='自己的扩展的属性值' & props:['msg']

子组件可以通过扩展属性绑定 :msg='parentMSG' & props:['msg'] 的方式给从父组件那里获取到值.

---

子组件往父组件传值

子组件通过 属性 的方式从父组件获取数据.

当子组件需要向父组件传递数据(数据流向:子组件 -> 父组件) ,一般是通过事件来实现.

Vue.component('pview',{
    template:`

      
我是父组件
从子组件传递过来的值:{{dataFromCview}}
      
      
`,
    data:function() {
      return {
        dataFromCview:''
      }
    },
    methods:{
    // 父组件提供事件响应函数,并利用第一个参数data获取子组件传递过来的数据
      showDataFromCView(data) {
        this.dataFromCview = data
      }
    }
  })

  Vue.component('cview',{
    template:`

      
      传值
      
`,
    data:function(){
      return {
        name:''
      }
    },
    methods:{
      on_click(){
        // 定义了一个事件,触发这个事件的响应函数是绑定了父组件的showDataFromCview方法,并将子组件的 this.name 属性以参数的形式传递回去.
        this.$emit('send-data-to-pview',this.name)
      }
    }

  })

html

结果:

子->父传值.gif

总结:

子组件从父组件传递值的时候,是利用 自定义事件指向父组件的某个方法,并在子组件内部触发这个自定义事件,间接的触发定义在父组件身上的方法,在利用参数的形式将数据从子组件传递到父组件身上去 .

补充:

当然,子组件定义的事件,不光可以绑定和触发父组件的方法,也可以直接修改父组件的属性值.

子组件定义一个 on_change_pview_data_pro 事件,在触发这个 on_change_pview_data_pro 事件时,直接修改父组件的 name 属性.

Vue.component('pview',{
    template:`

      
我是父组件
      
从子组件传递过来的值:{{dataFromCview}}
      
子组件通过事件直接修改父组件的name属性:{{name}}
      
      
`,
    data:function() {
      return {
        dataFromCview:'',
        name: '这是name默认值'
      }
    },
    methods:{
      showDataFromCView(data) {
        
        this.dataFromCview = data
      }
    }
  })

  Vue.component('cview',{
    template:`

      
我是子组件
      
      传值

      通过事件直接修改父组件的属性值
      
`,
    data:function(){
      return {
        name:''
      }
    },
    methods:{
      on_click(){
        // 定义了一个事件,触发这个事件的响应函数是绑定了父组件的showDataFromCview方法,并将子组件的 this.name 属性以参数的形式传递回去.
        this.$emit('send-data-to-pview',this.name)
      },
      on_change_pview_data_pro() {
       // 子组件直接触发事件,没有传递参数,因为没有绑定事件响应函数(父组件的某个方法)
       // 而是直接修改父组件的某个数据属性(name)的值为常量(通过事件常量传值)
       // @on_change_pview_data_pro="name='通过事件常量传值'"
        this.$emit('on_change_pview_data_pro')
      }
    }

  })
  

html

结果

子->父传值-直接在事件里修改父组件的属性值.gif

---

两个平行的组价之间传递消息

首先回顾父子间数据如何传递的:

• 数据流从父组件 --- >子组件 通过 属性

  • 子组件利用属性 :msg='pmsg' & 'props:['msg']' 拿到父组件的数据属性.
  • 子组件也可以自定义 msg='abc' & props:['msg'] 来扩展自己的自定义属性.

• 数据流从 子组件 --- > 父组件 通过 事件

  • 子组件通过非常正统的 子组件事件 & 父组件事件响应方法的方式来传递数据
    • 子组件在定义一个自定义事件,@send-data-to-pview='showDataFromCView' ,给此事件绑定一个父组件的事件响应函数.
    • 子组件在内部触发这个自定义事件,并通过第二个参数将数据传递到父组件事件响应方法里.

  // 子组件事件绑定父组件事件响应函数
  
  
      // 子组件触发这个事件 & 传递参数
  on_click(){
      this.$emit('send-data-to-pview',this.name)
       },
    
    // 父组件提供事件响应方法,并接受参数
     showDataFromCView(data) {
      this.dataFromCview = data
    }
  

   + 子组件事件直接修改父组件的数据属性值/
   
   ```JavaScript
   // 注意,这里的 name 是父组件的属性
  
  
   ```

也就是说,到目前为止,父子组件间传递数据.

+ 父 --> 子,利用`属性`
+ 子 --> 父,利用`事件`.


而**平行的两个组件之间**,是里用`事件`来传递值的.


**场景**

一个 **talker** 用来说一些话.
一个 **listener** 用来听 **talker**说的这些话.



```JavaScript

let Event = new Vue()

 Vue.component('talker',{
   template:`

       talker Says: 
     
`,

   data:function(){
     return {
       content:'我还什么都没说'
     }
   },
   methods:{
     isSaying() {
       // Event 通过 $emit,直接发送一个 event-talker-saying 的事件.
       // 并传出这个 this.content 数据.

       Event.$emit('event-talker-saying',this.content)
     }
   }
 })

 Vue.component('listener',{
   template:`

     i heard talker says:
     {{talkerSay}}
     
`,

   data:function(){
     return {
       talkerSay:''
     }
   },
   // 事件监听
   // 当组件加载到 DOM 中去时 ,绑定并监听这个事件
   mounted() {
     Event.$on('event-talker-saying',(content)=>{
       this.talkerSay = content
     })
   },

 })

html

它俩是平级的.

结果

平级组件间传值.gif

主要步骤:

• 使用 new Vue() 构造函数,获取一个没有作用域的全局vue事件实例.Event
• talker组件在合适的时机,使用Event触发事件event-talker-saying,并传递参数.

isSaying() {
        // Event 通过 $emit,直接发送一个 event-talker-saying 的事件.
        // 并传出这个 this.content 数据.

        Event.$emit('event-talker-saying',this.content)
        }

• listener在合适的时机(onmounted()),订阅事件,并在二个参数箭头函数里,拿到触发事件带过来的数据.

// 事件监听
    // 当组件加载到 DOM 中去时 ,绑定并监听这个事件
    mounted() {
      Event.$on('event-talker-saying',(content)=>{
        this.talkerSay = content
      })
    },
    
    // 补充一点,由于this作用域的问题,在这里推荐使用箭头函数.

---

最后总结:

• 数据传递方向

  • 父 -> 子 利用属性!!!****属性!!!****属性!!!

    • 子组件身上利用属性

      • 绑定父组件属性 :msg='pmg'

      • 自己的扩展属性 msg='hellworld'

      • 别忘了子组件内部的 props:['msg']

  • 子 -> 父 利用事件!!!****事件!!!****事件!!!

    • 子组件身上自己订阅自定义事件

      • 事件可以绑定父组件的某个方法作为事件响应函数.

      • 事件也可可以直接以常量的方式修改父组件数据属性的值.

    • 事件定义了,需要触发.

      • 子组件在合适的时机里,去触发这个事件.this.$emit('event-name',param)

  • A -> B 平级的两个组件使用 事件!!!****事件!!!****事件!!!

    • 需要传递数据的一方,利用一个全局的事件对象 let Event = new Vue(),来触发一个事件,并传递事件数据.

       Event.$emit('event-talker-saying',this.content)

   - 需要接受数据的这一方,则在一个合适的时机,监听此事件,并根据第二个箭头匿名函数拿到事件传递过来的数据.

        Event.$on('event-talker-saying',(content)=>{
        this.talkerSay = content
      })