부모 컴포넌트로부터 호출받는 값
props :
{
str1 :{ type : String,
default :'',
},
num1 : { type : Number,
default : 0,
}
},
이런 형태.
type과 default값을 정한다.
<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
을 사용하여 부모컴포넌트의
'changeLogged()
' 함수를 호출함(작동시킴).
, 뒤에 'home'은 changeLogged('home')
을 뜻함.
methods : {
handleMain(){
this.$emit('changeLogged','home');
},
}
이렇게 호출하여
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
와 일치시킴
ref
를 index
와 같게 만들어서 [path]
를 통해 불러와짐.