Login.vue

김형우·2021년 12월 24일
0

vue.js

목록 보기
19/30

부모 컴포넌트로부터 호출받는 값

props

  • 자식 컴포넌트 내에 위치함
props :
{
 str1 :{ type    : String,
         default :'',
       },             
 num1 : { type : Number,
          default : 0,                
        }
},

이런 형태.
type과 default값을 정한다.

  • 부모컴포넌트에서는

CompProp.vue (부모)

  • 자식 컴포넌트를 불러온다(등록한다?)
<script>    
    export default {    	
        components:{
            'comp-1' : Comp1,
            Comp2
        },
</script>        

이렇게 컴포넌트를 불러와서

  • 자식 props를 불러온다
<comp-1 :num1="age" :str1="name" @addNum="addNum1()"></comp-1>

이런형태를 통해 해당 컴포넌트로 불러와서

  • 자식에게서 불러온 데이터를 상태함수에서 정의한다.
<script>
	export default {
    	data(){
            return {
                name : '가나다',
                age : 23,
                price : 'a4',
            }
        }
    },	
</script>        

이렇게 사용한다.

자식 컴포넌트로부터 호출 받는 값

$emit

자식컴포넌트 내에서 $emit을 사용하여 부모컴포넌트의
'changeLogged()' 함수를 호출함(작동시킴).
, 뒤에 'home'은 changeLogged('home')을 뜻함.

Login.vue (자식)

  • 자식 컴포넌트에서 수행한 이벤트가 부모 컴포넌트에 있는 함수를 호출한다.
methods : {
            handleMain(){
                this.$emit('changeLogged','home');
            },
         }

이렇게 호출하여

App.vue (부모)

  • 부모 컴포넌트 내부의 메소드에 있는 함수.
changeLogged(path){
	this.$refs[path].$el.click();
    }

이런 메소드로 받아서 사용


  • [path]는 경로를 뜻함.
// this.$refs.home.click(); === this.$refs.['home'].click();
// this.$refs.path.click(); === this.$refs.['path'].click();
// 우리가 원하는건 path 라는 항목안에 있는 특정 값
// this.$refs.path.click(); === this.$refs.[path].click();

메뉴의 index 값을 :router="true"를 이용해 모두 path와 일치시킴
refindex와 같게 만들어서 [path]를 통해 불러와짐.

profile
The best

0개의 댓글