vue 컴포넌트 인자 전달

하늘·2024년 3월 21일
0

VUE

목록 보기
3/3

리액트랑 조금 다른 부분들이 엄청 헷갈린다
하다보면 익숙해지겠지 ㅇㅅㅇ

1. 💎부모 컴포넌트

// WorkView.vue (부모 컴포넌트)

1) 메소드 등록

    methods:{
        testFn(num){
            console.log(num)
        }
    },  

2) 컴포넌트 등록

components: {
        WorkList
    }

3) 자식 컴포넌트에 props 전달

<WorkList
            msg="work list msg ..."
            :parent="testFn"
        />

2. 💎자식 컴포넌트

// WorkList.vue (자식 컴포넌트)

1) 스크립트 props 추가

export default {
    props:{
        msg : String,
        parent : Function
    }
}

2) 버튼 추가

<button @click="$emit('parent', 1000)">부모함수실행!</button>
profile
새싹 프론트엔드 개발자

0개의 댓글

관련 채용 정보