Vue vm.$attrs 사용 필드 상세 설명

1.vm.$attrs 안내
우선 vue 공식 vm.$attrs 에 대한 소 개 를 살 펴 보 겠 습 니 다.
부모 역할 영역 에서 prop 로 인식 되 지 않 고 가 져 오 는 특성 바 인 딩(class 와 style 제외)을 포함 합 니 다.하나의 구성 요소 가 prop 에 대해 설명 하지 않 았 을 때 모든 부모 역할 필드 의 바 인 딩(class 와 style 제외)을 포함 하고 v-bin="$attrs"를 통 해 내부 구성 요소 로 들 어 갈 수 있 습 니 다―더 높 은 차원 의 구성 요 소 를 만 들 때 유용 합 니 다.
얼핏 보면 잘 안 보이 는데.....................................................
2.장면 소개
vue 에서 가장 고민 되 는 것 은 속성 이 부모 구성 요소 에서 만 하위 구성 요소 에 전달 되 는 것 입 니 다.이것 은 새 겨 진 계층 의 깊 은 구성 요소 데 이 터 를 전달 하려 면 부모 구성 요소 에서 하위 구성 요소 에 만 전달 할 수 있 고,하위 구성 요 소 는 손자 구성 요소 에 다시 전달 할 수 있 음 을 의미 합 니 다.아래 와 같이:

<parent-component :passdown="passdown">

<child-component :passdown="passdown">

<grand-child-component :passdown="passdown">

....

이렇게 한 층 한 층 씩 패스 다운 변 수 를 전달 해 야{{passdown}을 사용 할 수 있 습 니 다.
만약 에 우리 가 전달 해 야 할 속성 이 1,2 개 만 있 으 면 괜 찮 습 니 다.그러나 우리 가 전달 해 야 할 몇 개 또는 10 여 개의 상황 이 있다 면 이것 은 어떤 장면 일 까요?우 리 는 모든 구성 요소 가 멈 추 지 않 는 props 에서 여러 번 써 야 합 니 다.다른 편리 한 표기 법 이 있 습 니까?있 습 니 다.vuex 의 부자 구성 요 소 를 통 해 통신 하 는 것 은 확실히 이것 이 방법 이지 만 다른 방법 도 있 습 니 다.이것 이 바로 우리 가 말 하고 자 하 는 것 입 니 다.inheritattrs 옵션 및 인 스 턴 스 속성$attrs 를 통 해
3.실례:

<template>
 <div class="home">
  <mytest :title="title" :massgae="massgae"></mytest>
 </div>
</template>
<script>
export default {
 name: 'home',
 data () {
  return {
   title:'title1111',
   massgae:'message111'
  }
 },
 components:{
  'mytest':{
   template:`<div>   h1  {{title}}</div>`,
   props:['title'],
   data(){
    return{
     mag:'111'
    }
   },
   created:function(){
    console.log(this.$attrs)//    
   }
  }
 }
}
</script>

위의 코드,우 리 는 구성 요소 에서 title 이라는 속성 만 사 용 했 습 니 다.massgae 속성 은 저 에 게 쓸모 가 없습니다.그러면 아래 브 라 우 저 는 어떤 것 을 보 여 줍 니까?다음 그림:

구성 요소 에 등록 되 지 않 은 속성 은 일반 html 요소 속성 으로 렌 더 링 됩 니 다.속성 을 아래로 전달 하려 면 prop 구성 요소 가 사용 되 지 않 더 라 도 구성 요소 에 등록 해 야 합 니 다.이렇게 하면 구성 요소 의 예상 기능 을 모호 하 게 만 들 고 구성 요소 의 DRY 를 유지 하기 도 어렵다.Vue 2.4.0 에 서 는 구성 요소 정의 에 inheritaters:false 를 추가 할 수 있 습 니 다.구성 요 소 는 등록 되 지 않 은 props 를 일반적인 HTML 속성 으로 표시 하지 않 습 니 다.그러나 구성 요소 에서$attrs 를 통 해 사용 하지 않 은 등록 속성 을 얻 을 수 있 습 니 다.필요 하 다 면 아래 에서 도 계속 전달 할 수 있 습 니 다.
하위 구성 요소 에 inheritatrs:false 를 설정 하면:

components:{
  'mytest':{
   template:`<div>   h1  {{title}}</div>`,
   props:['title'],
   inheritAttrs: false,
   data(){
    return{
     mag:'111'
    }
   },
   created:function(){
    console.log(this.$attrs)//    
   }
  }

렌 더 링 효 과 는 다음 과 같 습 니 다.

상속 하지 않 는 경우.png
$attrs 사용 설명
부모 구성 요소,하위 구성 요소,손자 구성 요소 로 구 성 된 페이지 가 있 습 니 다.다음 과 같 습 니 다.

<template>
  <div style="padding:50px;">
    <childcom :name="name" :age="age" :sex="sex"></childcom>
  </div>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      template:`<div>
        <div>{{name}}</div>
        <grandcom v-bind="$attrs"></grandcom>
      </div>`,
      props:['name'],
      components: {
        'grandcom':{
          template:`<div>{{$attrs}}</div>`,
        }
      }
    }
  }
}
</script>

위의 코드 가 페이지 에 있 는 효 과 는 다음 과 같다.

attrs 가 하위 구성 요소 childcome 에 연결 되면 손자 구성 요소 grandcome 에서 this.$attrs 의 값 을 얻 을 수 있 습 니 다.이{{$attrs}}의 값 은 부모 구성 요소 에서 전달 되 는 props 입 니 다.
손자 구성 요소 grandcome 에서 this.$attrs 의 값 을 가 져 오 는 것 은 하위 구성 요소 childcome 성명 을 제외 한 요소 임 을 기억 하 십시오!하위 구성 요소 childcome 을 제외 한 요소 임 을 기억 하 십시오!예 를 들 어 위의 코드 는 하위 구성 요소 childcome 구성 요소 의 props 에서 name 을 설명 합 니 다.그러면 제 가 손자 구성 요소 grandcome 에서 얻 은$attrs 는 name 속성 을 포함 하지 않 습 니 다.그러면 this.$attrs={'age':'30','sex':'남'}.
$attrs 의 우세 가 어디 에 있 는 지 말씀 해 주세요.
만약 우리 가 페이지 를 만 들 려 면 부모 구성 요소,하위 구성 요소,손자 구성 요소 가 있 습 니 다.다음 과 같 습 니 다.

<template>
  <div>
    <childcom></childcom>
  </div>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      template:`<div>
        <div>     </div>
        <grandcom></grandcom>
      </div>`,
      components: {
        'grandcom':{
          template:`<div>      </div>`,
        }
      }
    }
  }
}
</script>

위 코드 와 같이 하위 구성 요소 에서 부모 구성 요소 의 name 속성 값 을 가 져 오고 싶 습 니 다.손자 구성 요소 에서 부모 구성 요소 의 age 속성 값 을 가 져 오고 싶 습 니 다.props 를 사용 하면 부모 구성 요소 에서 name 과 age 의 값 을 props 를 통 해 하위 구성 요소 에 전달 해 야 합 니 다.하위 구성 요 소 는 props 를 통 해 age 의 값 을 손자 구성 요소 에 전달 하고 있 습 니 다.여기 서 알 겠 죠?손자 구성 요소 에 필요 한 age 는 하위 구성 요소 에 사용 되 지 않 지만,손자 구성 요 소 를 가 져 오기 위해 서 는 부모 구성 요소 에서 하위 구성 요소 로 전달 해 야 합 니 다.하위 구성 요소 에서 손자 구성 요소 로 전달 해 야 합 니 다.
하지만$attrs 를 사용 하면 그렇게 귀 찮 게 하지 않 아 도 됩 니 다.다음 과 같 습 니 다.

<template>
  <div>
    <childcom :name="name" :age="age" :sex="sex"></childcom>
  </div>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      props:['name'],
      template:`<div>
        <div>       {{name}}</div>
        <grandcom v-bind="$attrs"></grandcom>
      </div>`,
      components: {
        'grandcom':{
          template:`<div>      {{$attrs.age}}</div>`,
        }
      }
    }
  }
}
</script>

하위 구성 요소 가"$attrs"를 연결 하면 손자 구성 요 소 는 name 속성 을 제외 한 모든 부모 구성 요소 가 전달 하 는 속성 을 얻 을 수 있 습 니 다.손자 구성 요소 도 name 속성 을 가 져 오 려 면 name 을 다음 과 같이 연결 합 니 다.

 <grandcom v-bind="$attrs" :name="name"></grandcom>

이 이치 가 맞 는 지 자세히 체득 하 다.정 안 되면 코드 를 두 드 려 서 스스로 시험 해 보면 너 는 갑자기 밝 아 질 것 이다.
보충:inheritattrs 속성
inheritaters 라 는 속성 은$attrs 의 값 을 가 져 오 는 것 과 관계 가 없습니다.inheritatrs 는 보통 기본 구성 요 소 를 작성 할 때 사 용 됩 니 다.홈 페이지 원래 말:기본 적 인 상황 에서 부모 역할 도 메 인 은 props 로 인식 되 지 않 는 특성 바 인 딩(attribute bindings)이'되 돌아 가기'하고 일반적인 HTML 특성 으로 하위 구성 요소 의 루트 요소 에 적 용 됩 니 다.대상 요소 나 다른 구성 요 소 를 감 싸 는 구성 요 소 를 작성 할 때 항상 예상 한 행동 에 부합 되 지 않 을 수 있 습 니 다.inheritaters 를 false 로 설정 하면 기본 동작 이 삭 제 됩 니 다.또한(같은 2.4 에 추 가 된)인 스 턴 스 속성$attrs 를 통 해 이러한 특성 을 적용 할 수 있 으 며,v-bind 를 통 해 비 루트 요소 에 명시 적 으로 연결 할 수 있 습 니 다.
메모:이 옵션 은 class 와 style 바 인 딩 에 영향 을 주지 않 습 니 다.
Vue 2.4.0 이전 버 전에 서 는 구성 요소 에 등록 되 지 않 은 속성 이 일반 html 요소 속성 으로 렌 더 링 됩 니 다.
상속 Atts 는 도대체 무슨 소 용이 있 습 니까?도대체 어디 에 쓰 는 거 야?아래 코드 를 보면,

<template>
  <childcom :name="name" :age="age" type="text"></childcom>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      props:['name','age'],
      template:`<input type="number" style="border:1px solid blue">`,
    }
  }
}
</script>

위의 코드 는 input 에 어떻게 표 시 될 것 같 습 니까?부모 구성 요소 가 type="text"를 전 달 했 습 니 다.하위 구성 요소 에 type="number"를 입력 하면 페이지 에 렌 더 링 하 는 것 은 어떻게 됩 니까?렌 더 링 그림 은 다음 과 같 습 니 다.

기본 상황.png
보 셨 습 니까?부모 구성 요소 가 전달 하 는 type="text"는 input 에 type="number"를 덮어 씁 니 다.이것 은 제 input 데이터 형식 을 모두 바 꾸 는 것 이 아 닙 니까?이것 은 문제 가 있 는 것 이 아 닙 니까?이것 은 제 가 원 하 는 것 이 아 닙 니 다!!!여기 보면 알 겠 지?나중에 위 홈 페이지 의 원 어 를 알 아 보 세 요!!!
필요:input 상 type="number"형식 은 변 하지 않 지만 부모 구성 요소 의 type="text"값 을 찾 으 려 면 코드 는 다음 과 같 습 니 다.

<template>
  <childcom :name="name" :age="age" type="text"></childcom>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      inheritAttrs:false,
      props:['name','age'],
      template:`<input type="number" style="border:1px solid blue">`,
      created () {
        console.log(this.$attrs.type)
      }
    }
  }
}
</script>

페이지 렌 더 링 그림 은 다음 과 같 습 니 다.

필요.png
여기까지.상속 Atts 의 역할 을 모두 가 알 고 있 을 거 라 고 생각 합 니 다.기본 적 인 상황 에서 vue 는 부모 역할 도 메 인 을 props 로 인식 되 지 않 는 특성 으로 연결 하고 일반적인 HTML 특성 으로 하위 구성 요소 의 루트 요소 에 적용 합 니 다.바 인 딩 은 바 인 딩 입 니 다.표시 하면 표시 합 니 다.별거 아 닙 니 다.하지만 특별한 것 을 만 날 까 봐 두 렵 습 니 다.예 를 들 어 위의 input 의 경우 이 럴 때 inheritaters:false 의 역할 이 나 옵 니 다.
가 는 길에$listeners
부모 구성 요소-하위 구성 요소-손자 구성 요소,,,이제 손자 구성 요소 에서 부모 구성 요소 의 값 을 바 꾸 라 고 합 니 다.어떻게 바 꾸 시 겠 습 니까?많은 방법 이 있 지만$listeners 는 우리 에 게 새로운 아 이 디 어 를 제공 해 주 었 다.말 이 많 지 않 으 면,직접 코드 를 붙인다.

<template>
  <div>
    <childcom :name="name" :age="age" :sex="sex" @testChangeName="changeName"></childcom>
  </div>
</template>
<script>
export default {
  'name':'test',
  props:[],
  data(){
    return {
      'name':'  ',
      'age':'30',
      'sex':' '
    }
  },
  components:{
    'childcom':{
      props:['name'],
      template:`<div>
        <div>       {{name}}</div>
        <grandcom v-bind="$attrs" v-on="$listeners"></grandcom>
      </div>`,
      
      components: {
        'grandcom':{
          template:`<div>      -------<button @click="grandChangeName">    </button></div>`,
          methods:{
            grandChangeName(){
              this.$emit('testChangeName','kkkkkk')
            }
          }
        }
      }
    }
  },
  methods:{
    changeName(val){
      this.name = val
    }
  }
}
</script>

페이지 렌 더 링 은 다음 과 같 습 니 다:

$listeners 는 손자 구성 요소 에서 부모 구성 요소 의 값 을 바 꿀 수 있 습 니 다.편리 하지 않 습 니까?
vm.$attrs 사용 장면 에 대한 자세 한 설명 은 여기까지 입 니 다.vm.$attrs 사용 내용 에 대해 서 는 이전 글 을 검색 하거나 아래 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!