vue provide/inject 이해

8536 단어 vue
사용 장면: 구성 요소 전송, 특히 할아버지 구성 요소 - 손 구성 요소 등 경계가 있는 구성 요소 간 전송, 단방향 전송 (provide의 구성 요소가 inject에 전달되는 구성 요소)
provide 옵션은 대상이나 대상을 되돌려주는 함수입니다.이 대상은 그 자손을 주입할 수 있는 속성을 포함한다
inject는 보통 문자열 그룹입니다
주의해야 할 것은 하위 구성 요소가 아무리 깊어도 inject를 호출하면provider에 데이터를 주입할 수 있다는 것이다.현재 부모 구성 요소의 prop 속성에서만 데이터를 얻을 수 있는 것이 아니라
상위 구성 요소:
<div>
       <div>this is a father</div>
       <AA></AA>
       <div v-if="ifHide">       </div>
</div>

<script>
import AA from "./aa.vue"
    export default {
        data(){
            return {
                ifHide:true
            }
        },
        components:{
           AA
        },
        provide(){
            return{
                ifDom:this.ifDom,
                fooNew: "bartest" 
            }
        },
        methods:{
            ifDom(){
                this.ifHide = !this.ifHide;
            }
        }
    }
</script>

서브어셈블리:
<div>
       <div>this is a son</div>
       <BB></BB>
 </div>
 
<script>
    import BB from "./bb.vue"
    export default {
        data(){
            return {
                
            }
        },
        components:{
            BB
        },
        methods:{
            
        }
    }
</script>

손 구성 요소:
<div>
        <div>this is a grandson</div>
        <div @click="btnClick">    </div>
        <div>{{fooNew}}</div>
</div>

export default {
        data(){
            return {
                
            }
        },
        mounted(){
            
        },
        inject:['ifDom','fooNew'],
        methods:{
            btnClick(){
                this.ifDom();
            }
		}
  }

좋은 웹페이지 즐겨찾기