[Vue.js] 컴포넌트 연동하기

1. /resources/js/components/ 밑에 원하는 이름의 Vue컴포넌트를 생성

Test.vue 컴포넌트

<template>
  <div>
    123 <span :class="testClass">456</span>
  </div>
</template>

<script>
export default {
  name: "Test",
  props: {
  	testClass: String,  // 부모Vue 페이지에서 받아올 변수들을 지정해줘야 한다.
  }
}
</script>

<style scoped>
  div span.a{color:orangered}
  div span.b{color:greenyellow}
</style>

 

 

2. 전역 컴포넌트 설정

전역 컴포넌트로 설정하게 되면 어느 페이지에서든 바로

<test></test> 태그를 쓸수있다.

 

app.js 또는 main.js 에 전역으로 설정한다.

Vue.component('test', require('./components/Test').default);

 

컴포넌트를 사용할 Vue 페이지

<template>
	<!-- 사용할 변수를 testClass -> test-class 로 대문자를 - 로 변환해서 사용해준다 -->
	<test test-class="a"></test>
</template>

test-class에 a를 넣어주면 오렌지색이 적용 되고, b를 넣으면 연두색이 적용 된다.

 

 

3. 지역 컴포넌트 설정

지역 컴포넌트는 해당 컴포넌트를 불러올 Vue 파일 내에서만 선언 해주는 것이다.

다른 Vue 파일에서는 각각 선언 해주기 전까지는 불러다가 쓸수 없다.

 

컴포넌트를 사용할 Vue 페이지

<template>
	<test test-class="b"></test>
</template>

<script>
import test from '../components/Test'; // Test.vue 컴포넌트를 import 시키고 test 라는 태그로 사용한다고 명시

export default {
    components: {
    	test // 위에서 import 할때 정의했던 test 를 컴포넌트에 정의
    }
}
</script>

 

 

4. 컴포넌트에서 변수를 받아서 후처리 하는 방법

<template>
  <div>
    123 <span :class="testClass">{{number + number2}}</span>
  </div>
</template>

<script>
export default {
  name: "Test",
  props: {
  	testClass: String,  // 부모Vue 페이지에서 받아올 변수들을 지정해줘야 한다.
  },
  
  data() { 
  	let number, number2;
    
    if (this.testClass == 'a')
      number=7;
    
    return { // 리턴으로 넘겨준 값들을 템플릿에서 사용할 수 있다
    	number,
        number2: 5 // 이렇게 값 대입도 가능
    }
  }
}
</script>

<style scoped>
  div span.a{color:orangered}
  div span.b{color:greenyellow}
</style>