快捷導(dǎo)航

關(guān)于vue組件事件屬性穿透詳解

更新時間：2019年10月28日 09:21:34 作者：莫西摩西

今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

組件事件屬性穿透

屬性

$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)行為，這樣就可以通過實(shí)例屬性 $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)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時,?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧
2025-04-04
vue的hash值原理也是table切換實(shí)例代碼
這篇文章主要介紹了vue的hash值原理也是table切換,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-12-12
詳解vue3.0 的 Composition API 的一種使用方法
這篇文章主要介紹了vue3.0 的 Composition API 的一種使用方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-10-10
Vue路由切換時的左滑和右滑效果示例
這篇文章主要介紹了Vue路由切換時的左滑和右滑效果,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-05-05
詳解Vue.js動態(tài)綁定class
Vue.js的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)，它允許我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數(shù)據(jù)。被綁定的DOM 將與數(shù)據(jù)保持同步，每當(dāng)數(shù)據(jù)有改動，相應(yīng)的DOM視圖也會更新?；谶@種特性，通過vue.js動態(tài)綁定class就變得非常簡單。一起來看下吧
2016-12-12
vue3+ts實(shí)現(xiàn)樹形組件(菜單組件)
本文主要介紹了vue3+ts實(shí)現(xiàn)樹形組件(菜單組件)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法
表格常用功能經(jīng)常有字段篩選、更多字段篩選彈框來過濾出我們所需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue中進(jìn)行數(shù)據(jù)篩選與搜索功能實(shí)現(xiàn)常用的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
淺析vue.js數(shù)組的變異方法
本篇文章給大家分享了vue.js數(shù)組的變異方法的相關(guān)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)參考下。
2018-06-06
Vue3 的響應(yīng)式和以前有什么區(qū)別，Proxy 無敵？
這篇文章主要介紹了Vue3 的響應(yīng)式和以前有什么區(qū)別,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue-cli如何修改打包項目結(jié)構(gòu)及前綴
這篇文章主要介紹了vue-cli如何修改打包項目結(jié)構(gòu)及前綴問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-07-07