Vue.js에서 함수형 구성 요소를 사용하면

이 글은 오사카공업대학 Advent Calendar 2019 5일째 글입니다.

입문

며칠 전 일.새로운 서비스를 해야 하기 때문에 새로운 임무를 내렸다.
이것은 새로운 응용 프로그램 아닙니까!!
따라서 이번 이야기는 이 서비스 개발의 일부분에서 Atomic Design과 함수형 구성 요소를 사용한 것이다.

자기소개

어딘가에서 프론트 주위를 만지다.나는 월귤을 좋아한다.
대학 자체는 이미 OB가 났지만, 조건부로 OK처럼 하자!

Atomic Design

'Atomic Design'은 화면을 대충 단계로 나누어 부품의 제작, 조합을 하는 방법이다.

최소 요소(Atoms)로 만들기
Atoms와 결합하여 하나의 기능을 가진 요소 만들기(Molecules)
Atoms, Molecules를 결합하여 화면을 구성하는 하나의 요소(Organisms) 만들기
마지막으로 제작된 요소군을 이용하여 템플릿 페이지의 느낌을 구성한다.
(이미지 이해하기 어려워
Atomic Design 세부 내용 및 Vuejs에 떨어진 곳에 대해서는 다른 사람의 보도를 찾아보세요.
이번에 Atomic 디자인에서 조립된 구성 요소 중 일부 Atoms를 함수형 구성 요소로 조립해 보았다.

함수형 구성 요소

※Vue.js의 공식 참고에서 함수형 구성 요소에 대한 설명은 렌더링 함수를 사용했지만, 이번에는 주로 단일 파일 구성 요소로 진행되었다
공식. 함수형 구성 요소는 상태가 없고 원가가 적은 구성 요소를 묘사할 수 있는 녀석이라고 한다.
(구체적으로 묘사 비용이 왜 줄어드는지 모르겠다
단일 파일 구성 요소에서 사용할 때template 태그에 functional 를 추가하면 함수형 구성 요소로 인식됩니다.
HeadOne.vue

<template functional>
  <h1 class="text-2xl font-bold">
    <slot />
  </h1>
</template>

이런 인상.
그나저나 vue의 devtool에서는 이런 느낌functional이 나타난다.

가격 주위 조심하세요.

함수형 구성 요소는 값을 명확하게 쓰는 집적 등이 필요하다.
예컨대 반의 설정.
일반 구성 요소를 준비했다고 가정하십시오Child.vueChild.vue

<template>
  <p class="leading-loose">ほげほげ</p>
</template>

모든 구성 요소에 불러오고 호출할 때 클래스를 추가합니다.
Parent.vue

<template>
  <div>
    <child class="text-gray" />
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  components: {
    Child,
  },
}
<script>

이 동작을 실행하면 p 표시된class에 text-gray 를 추가합니다.
결과 내보내기

<div>
  <p class="leading-loose text-gray">ほげほげ</p>
<div>

이것은 흔히 볼 수 있는 행동이다.
그러면 함수형 구성 요소는 어떻게 됩니까?
함수형 구성 요소Child.vue에서 위의 예와 같이 정적class를 통합하고자 할 때
Child.vue

<template functional>
  <p 
    class="leading-loose" 
    :class="data.staticClass"
  >
    ほげほげ
  </p>
</template>

이렇게 쓰면 돼요.
그러나 위의 표현에서는 Vue입니다.js는 조작 가능한 클래스를 통합하지 않습니다v-bind:class.
정적, 동적 클래스 중 어느 하나라도 반영하고 싶을 때 동적 클래스를 잘 쓰면 된다.
Child.vue

<template functional>
  <p 
    class="leading-loose" 
    :class="[data.class, data.staticClass]" 
  >
    ほげほげ
  </p>
</template>

나는 이 부근에서 좀 반했다.

감상

Atomic Design 그렇죠.

코드의 양이 늘어날 것 같지만 사용하기에 효과적이어서 행복합니다.(나는 어떤 것들은 항목을 뛰어넘어 재활용할 수 있다고 생각한다)
다만, 색 주위의 정의는 어떻게 구분해야 좋을까.어떻게 하면 예뻐요?

함수형 구성 요소의 범위 확장

지식이 부족하기 때문에 Atoms를 함수형 구성 요소로만 바꾸었지만 동작에 영향을 미치지 않는 수준으로 바꿀 수 있다.
적어도 Molecules의 일부는...

저는 아무 공연도 몰라요.

이거
어디서 한번 해보고 공연 주변의 데이터를 비교해보는 것도 재미있어요.

함수형 이벤트 주위에는 아무것도 몰라요.

이 기사를 쓸 때 만들어 보세요. 참새의 눈물이지만 지견을 얻었으니 아래 사은품으로 적어주세요.

마지막

Vue.아무것도 모르다
(쓴 것이 정확한지 확인하기 위해 Nuxt.js를 사용하지 않고 몇 달 만에 Vue.js 기반 프로젝트를 만든 후 프로젝트의 템플릿은 웹 팩을 사용하지 않고 탐색 터치를 사용합니다.)
또한 Atomic Design은 DRY 원칙에 부합하는 인식입니다. 어떻습니까...말해줘...

경품: 함수형 구성 요소로 바꾸기

자신의 비망록도 작성하고 대응도 남긴다.
새로 알게 된 것이 있으면 덧붙이고, 잘못을 알면 수정을 덧붙인다.

class

Child.vue

<template functional>
  <p :class="[data.class, data.staticClass]">
    ほげほげ
  </p>
</template>

부모 구성 요소에서 클래스 이름을 얻을 때 불러오는 것을 표시해야 합니다.
정적, 동적 클래스를 연결하려면 [data.class, data.staticClass]에서class 이름을 찾는 느낌이 괴롭지 않습니다.

props

props..이상!
Child.vue

<template functional>
  <div>
    <h3>{{props.title}}</h3>
    <p>{{props.text}}</p>
  </div>
</template>
<script>
export default {
  props: {
    title: { type: String },
    text:  { type: String },
  },
}
</script>

slot

이것은 변하지 않는 것이다
Child.vue

<template functional>
  <p>
    <slot />
  </p>
</template>

이벤트 탐지기

특정 이벤트 전달 시

보통 이렇게 써요.
Child.vue

<template>
  <button @click="$emit('click', $event)">おしてちょ</button>
</template>

Parent.vue

<template>
  <div>
    <component-button @click="callMethod" />
  </div>
</template>
<script>
import ComponentButton from '@/components/Button.vue'
export default {
  components: {
    ComponentButton,
  },
  methods: {
    callMethod() { /* 処理 */ },
  },
}
</script>

함수형 구성 요소에서는 이런 느낌이다.
Child.vue

<template functional>
  <button @click="listeners.click">おしてちょ</button>
</template>

$emit('click', $event) → listeners.click

난잡하게 활동의 교환을 진행할 때

Child.vue

<template functional>
  <button v-on="listeners">おしてちょ</button>
</template>