關于vue組件事件屬性穿透詳解

發布時間:2019-11-13 14:16 來源:互聯網 當前欄目:web技術類

組件事件屬性穿透

屬性

$attrs包含從父組件傳過來的屬性,但不包含子組件中prop中的屬性以及class和style,所以對于那些html元素原生屬性,可以不用再子組件中聲明,直接從父組件中傳進來就好

// 子組件
<template>
 <div>
   <input type="text" name=""  v-bind="$attrs" v-on='listeners'/>
 </div>
</template>
 props: {
  test: {
   type: String,
   default: '123456'
  }
 },
 created () {
  console.log(`props:%o`, this.$props) // {test: '測試'}
  console.log('attrs:%o', this.$attrs) // {value: '測試'}
 },

 // 父組件
 <myInput :value="value" :class="class_" : :test='test' @input1="input"/>
  data () {
  return {
   style: {
    color: 'red'
   },
   value: '測試',
   class_: 'test',
   test: '測試'
  }
 }

注意:

由于在這個組件中input并不是根元素,默認情況下父組件的不被認作 props 的特性綁定將會“回退”且作為普通的 HTML 特性應用在子組件的根元素上,在該例子中根節點div會有value="測試"的屬性,所以子組件需要設置 inheritAttrs: false去掉根元素默認行為,這樣就可以通過實例屬性 $attrs 可以讓這些特性生效,且可以通過 v-bind 顯性的綁定到非根元素上。

在子組件修改props,卻不會修改父組件,這是因為extractPropsFromVNodeData中是通過淺復制將父組件中數據傳遞給props的。 淺復制意味著在子組件中對對象和數組的props進行修改還是會影響父組件,這就違背了單向數據流的設計。因此需要避免這種情況出現。

事件

$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件
 computed: {
  listeners () {
   return {
    ...this.$listeners,
    // 下面寫需要從子組件事件傳值到從父組件中的
    input: e => {
     this.$emit('input1', e.target.value)
    }
   }
  }
 },

以上這篇關于vue組件事件屬性穿透詳解就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持IIS7站長之家。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、