5. 모듈성 2. 소품 전달. 계산된 템플릿 변수

구성요소(실제)

Components (real)

Passing prop (v-bind)

Computed (template variables)

현재 구성 요소는 정적 콘텐츠(텍스트)가 있는 색상이 지정된 사각형입니다. 실제 구성 요소 콘텐츠는 동적이며 props 로 전달됩니다.

소품은 부모에서 자식으로 전달되는 외부 매개변수(변수)입니다.

구성 요소의 개념은 부모( props )로부터 외부 데이터를 수신하고 {{ }} 내부에 이러한 소품을 위한 빈 슬롯이 있는 html과 같은 템플릿에 넣는 것입니다.

전달 소품(v-바인드)

index.html를 열고 이전에 설명했던 키 중 하나의 코드를 복사하여 Key 구성 요소 템플릿에 붙여넣습니다.

Key.js

const Key = {
    template: `
    <div class="key">
        <div class="main">1</div>
        <div class="shifted">!</div>
    </div>`
}

export default Key

새 소품에 대해 알려야 합니다Key. 템플릿에서 소품을 사용하십시오.

Key.js

const Key = {
    template: `
    <div class="key">
        <div class="main">
            {{ keyContent.main }}
        </div>
        <div class="shifted">
            {{ keyContent.shifted }}
        </div>
    </div>`,
    props: {
        keyContent: Object
    }
}

export default Key

구성 요소에 소품props: {keyContent: Object}에 대해 설명했습니다.

템플릿에 소품을 배치할 위치를 {{ }}로 알려 주었습니다.

다음으로 부모로부터 소품을 전달합니다.

단일 키에 대한 데이터 열기keyboardData/en.js 및 복사:

keyboardData/en.js

{
    code: 'Digit1',
    main: '1',
    shifted: '!',
    mainName: 'one',
    shiftedName: 'exclamation mark'
}

이 개체를 부모Key에서 소품keyContent으로 Keyboard 구성 요소에 전달합니다.

Keyboard.js

import Key from './Key.js'

const keyData =
    /*paste here copied before data*/
    {
        code: 'Digit1',
        main: '1',
        shifted: '!',
        mainName: 'one',
        shiftedName: 'exclamation mark'
    }

const Keyboard = {
    template: `
    <div class="keyboard">
        Keyboard
        <vue-key :keyContent="keyData" />
    </div>`,
    components: {
        'vue-key': Key
    },
    /* put external data inside component */
    data() {
        return { keyData }
    }
}

export default Keyboard

여기서 우리는:

키 데이터를 const keyData에 붙여넣었습니다.

구성 요소가 메서드data(){}에서 이 데이터를 보도록 했습니다.

이 keyData를 자식Key 구성 요소<vue-key :keyContent="keyData" />에 소품으로 전달했습니다.

prop을 전달할 때 이름 앞에 콜론:을 사용합니다.

<vue-key :keyContent="keyData" />

이 경우 프레임워크는 "keyData"를 변수 이름으로 해석합니다.

그렇지 않으면 ( : 없이) 문자열로 해석됩니다.
<vue-key keyContent="keyData" /> -- 키 구성 요소가 객체 대신 "keyData"문자열을 수신합니다keyData.

결과:


Keyboard.js로 돌아갑니다. keyboardData/en.js에 이미 모든 키 데이터가 있으므로 단일 키 데이터 대신 가져와서 사용하겠습니다.

Keyboard.js

import Key from './Key.js'
import keyboardData from '../keyboardData/en.js'

const Keyboard = {
    template: `
    <div class="keyboard">
        Keyboard
        <vue-key :keyContent="keyboardData[1][0]" />
        <vue-key :keyContent="keyboardData[1][1]" />
        <vue-key :keyContent="keyboardData[1][2]" />
        <vue-key :keyContent="keyboardData[1][3]" />
        <vue-key :keyContent="keyboardData[1][4]" />
        <vue-key :keyContent="keyboardData[1][5]" />
    </div>`,
    components: {
        'vue-key': Key
    },
    data() {
        return { keyboardData }
    }
}

export default Keyboard

이제 우리는 더 적은 코드와 더 많은 키를 갖게 되었습니다. Key 구성 요소를 변경하면 앱의 모든 키가 변경됩니다.

결과

계산됨(템플릿 변수)

첫 번째 행keyboardData[0]을 표시하려고 하면(Esc, F1, F2, …)

    ...
    template: `
    <div class="keyboard">
        <vue-key :keyContent="keyboardData[0][0]" />
        <vue-key :keyContent="keyboardData[0][1]" />
        <vue-key :keyContent="keyboardData[0][2]" />
        <vue-key :keyContent="keyboardData[0][3]" />
        <vue-key :keyContent="keyboardData[0][4]" />
        <vue-key :keyContent="keyboardData[0][5]" />
    </div>`,
    ...

비어 있는 노란색 사각형을 얻습니다.



이는 이러한 키에 main 또는 shifted 값이 없기 때문입니다.

;[
    { code: 'Escape', label: 'Esc' },
    { code: 'F1' },
    { code: 'F2' },
    { code: 'F3' },
    { code: 'F4' },
    { code: 'F5' }
]

따라서 code 및 label 와 같은 다른 매개변수에서 계산해야 합니다. Vue 컴포넌트는 이러한 경우에 특별한 속성computed을 가지고 있습니다.

Key.js

const Key = {
    ...,
    props: {
        keyContent: Object
    },
    /* add: */
    computed: {
        main() {
            /*
            Code line below is called `destructuring`,
            because we destructure an object `this.keyContent`
            into 3 separate constants.
            */
            const { main, label, code } = this.keyContent

            return label || main || code
/*
|| is a logical `or` operator. The line above is `or chain`. If `label` exists, it will be returned. If label doesn't exist, but `main` exists -- will be returned `main`. If label and main don't exist, will be returned `code`.
*/
        },
        shifted() {
            const { shifted } = this.keyContent
            return shifted
        }
    }
}

export default Key

구성 요소 개체에 computed 및 main() 2가지 메서드가 포함된 새 속성shifted()을 추가했습니다. 또한 이 새 값을 사용하도록 변경했습니다template.
{{keyboardData.main}} —> {{main}}{{keyboardData.shifted}} —> {{shifted}}
결과:



모든 행을 출력하기 전에 구성 요소 계층 구조가 어떻게 작동하는지 보기 위해 추가한 모든 임시 스타일을 제거합니다. styles.css의 끝에서 이 줄을 제거합니다.

스타일.css

#app {
    background-color: red;
    padding: 10px;
}

.langSwitcher {
    background-color: green;
    padding: 10px;
}

.keyboard {
    background-color: blue;
    padding: 10px;
    display: flex;
}

.key {
    background-color: yellow;
    padding: 10px;
    color: black;
}

데이터 모델의 모든 행을 출력해 보겠습니다. Keyboard 템플릿에 아래 코드 입력

Keyboard.js 템플릿

<div class="keyboard">
    <div class="row row-1">
        <vue-key :keyContent="keyboardData[0][0]" />
        <vue-key :keyContent="keyboardData[0][1]" />
        <vue-key :keyContent="keyboardData[0][2]" />
        <vue-key :keyContent="keyboardData[0][3]" />
        <vue-key :keyContent="keyboardData[0][4]" />
        <vue-key :keyContent="keyboardData[0][5]" />
    </div>
    <div class="row row-2">
        <vue-key :keyContent="keyboardData[1][0]" />
        <vue-key :keyContent="keyboardData[1][1]" />
        <vue-key :keyContent="keyboardData[1][2]" />
        <vue-key :keyContent="keyboardData[1][3]" />
        <vue-key :keyContent="keyboardData[1][4]" />
        <vue-key :keyContent="keyboardData[1][5]" />
    </div>
    <div class="row row-3">
        <vue-key :keyContent="keyboardData[2][0]" />
        <vue-key :keyContent="keyboardData[2][1]" />
        <vue-key :keyContent="keyboardData[2][2]" />
        <vue-key :keyContent="keyboardData[2][3]" />
        <vue-key :keyContent="keyboardData[2][4]" />
    </div>
</div>

행을 <div class="row row-{{index}}">...</div>로 래핑했습니다.

결과:



마지막 줄이 올바르지 않은 것 같습니다.

대문자가 있는 언어(예: 키릴 자모, 라틴 알파벳)의 경우 기본 슬롯shifted 값(대문자)에 표시하고 값main을 전혀 표시하지 않습니다. 그렇지 않으면 키보드가 비현실적으로 보일 것입니다. 이 모든 작업을 수행하는 함수getKeyLabels(keyContent)를 추가해 보겠습니다.

Key.js

const getKeyLabels = keyContent => {
    const { main = '', shifted = '', label, code } = keyContent
    const isUpperCaseLang = main.toUpperCase() === shifted
    const mainOutput = isUpperCaseLang ? shifted : main
    const shiftedOutput = isUpperCaseLang ? '' : shifted

    return {
        main: label || mainOutput || code,
        shifted: shiftedOutput
    }
}

const Key = {
    template: `
    <div class="key">
        <div class="main">{{main}}</div>
        <div class="shifted">{{shifted}}</div>
    </div>`,
    props: {
        keyContent: Object
    },
    computed: {
        main() {
            const { main } = getKeyLabels(this.keyContent)
            return main
        },
        shifted() {
            const { shifted } = getKeyLabels(this.keyContent)
            return shifted
        }
    }
}

export default Key

main() 및 shifted()에서 새 함수 getKeyLabels를 사용합니다.

결과는 괜찮습니다:



Differences between old code and new code

Entire code after the chapter