組件事件屬性穿透

成都創(chuàng)新互聯(lián)專注于網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、網(wǎng)站制作、網(wǎng)站開發(fā)。公司秉持“客戶至上,用心服務(wù)”的宗旨,從客戶的利益和觀點(diǎn)出發(fā),讓客戶在網(wǎng)絡(luò)營銷中找到自己的駐足之地。尊重和關(guān)懷每一位客戶，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對待客戶，用專業(yè)的服務(wù)創(chuàng)造價值，成為客戶值得信賴的朋友，為客戶解除后顧之憂。

屬性

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

// 子組件
<template>
 <div>
   <input type="text" name="" id="" 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_" :style='style' :test='test' @input1="input"/>
  data () {
  return {
   style: {
    color: 'red'
   },
   value: '測試',
   class_: 'test',
   test: '測試'
  }
 }

注意:

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

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

事件

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

以上這篇關(guān)于vue組件事件屬性穿透詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)站題目：關(guān)于vue組件事件屬性穿透詳解
文章URL：http://chinadenli.net/article14/gsjsge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計、響應(yīng)式網(wǎng)站、面包屑導(dǎo)航、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)