오프닝

계속지난번, Vue.천천히 js를 읽으세요공식 강좌.
지난번에는 주로 v-bind 등 지령이 언급되었다.이번에는 구성 요소에 관한 것입니다.

구성 요소

구성 요소는 일반적으로 위젯을 가리키지만 튜토리얼에는 다음과 같은 내용이 있습니다.
Vue에서 어셈블리는 기본적으로 미리 정의된 옵션이 있는 Vue 인스턴스입니다.
그럼 "Vue 인스턴스"는 뭘까요?Vue 인스턴스는 Vue 함수로 생성된 인스턴스로 지금까지 여러 차례 다음 코드를 통해 생성되었습니다.

new Vue({ /* オプション */ });

이것은 루트 Vue 실례라고 불리는 실례를 생성했다. 모든 Vue 응용 프로그램은 루트 Vue 실례와 그 위에 걸려 있는 Vue 실례로 구성된다.루트 Vue 인스턴스에 매달린 Vue 인스턴스는 어셈블리에 해당합니다.

어셈블리 생성

어셈블리를 빠르게 생성하기 전에 메시지만 표시하는 지식을 만듭니다.

첫 번째 구성 요소 이전에

<div id="app1">
    <div>{{ message }}</div>
</div>
<script>
    let content1 = "[app1] Let's enjoy Vue!";
    new Vue({
        el: '#app1',
        data: { message: content1 },
    });
</script>

아까 말씀드린 new Vue({el: '#app1'}) 중 관련id="app1"의div 요소는 뿌리 Vue 실례에 해당하는 요소라고 할 수 있습니다.이제 루트 Vue 인스턴스에 매달린 구성 요소를 사용하여 메시지 표시 섹션을 생성합니다.

첫 번째 구성 요소 (메시지를 표시하는 구성 요소)

<div id="app2">
    <message></message>
</div>
<script>
    // message と呼ばれる新しいコンポーネントを定義
    Vue.component('message', {
        template: "<div>[app2] Let's enjoy Vue!</div>",
    })

    new Vue({
        el: '#app2',
    });
</script>

Vue.component()를 사용하여 어셈블리를 생성할 수 있습니다.첫 번째 매개변수에 대해 어셈블리의 태그 이름을 지정하고 두 번째 매개변수에 대해 선택적 객체를 지정합니다.옵션 대상의 template 옵션은 구성 요소에 표시되는 html를 지정합니다.여기서, 우리는 메시지를 표시하기 위해 메시지 구성 요소를 만들었습니다.
현재 id="app2" 요소 아래에서 메시지 구성 요소를 사용하여 메시지를 표시할 수 있습니다.
이렇게 해도 되지만 어셈블리는 부품입니다.부품은 다른 곳에서도 사용할 수 있도록 반드시 통용되어야 한다.위의 예에서 메시지 구성 요소의 template 옵션에 메시지를 직접 썼기 때문에 통용성이 있다고 할 수 없습니다.나는 이 부분을 수정해 보았다.

구성 요소 (데이터에 메시지를 표시하는 구성 요소)

<div id="app3">
    <message></message>
</div>
<script>
    let content3 = "[app3] Let's enjoy Vue!";
    Vue.component('message', {
        template: '<div>{{ content }}</div>',
        data: function() { return { content: content3 }},
    })

    new Vue({
        el: '#app3',
    });
</script>

구성 요소의 선택 가능한 대상data 옵션은template의 {{ }}에서 데이터를 전개할 수 있도록 데이터 대상을 포함합니다.
단, data 옵션은 다음과 같은 직접적인 데이터 대상이 아닌 데이터 대상을 되돌려주는 무명 함수를 지정합니다.

new Vue({
    el: '#app3',
    data: { content: content3 }, // ←コンポーネントではこれはNG
});

원래Vue.component는 상기 형식으로 데이터를 지정하면 경고 메시지를 보내지만 Vue의 구성 요소에서는 NG이고 튜토리얼에서도 명언입니다.
구성 요소의 데이터 옵션은 함수여야 합니다.각 인스턴스는 반환할 데이터 객체의 독립 복사본을 유지할 수 있기 때문입니다.
나는 왜 함수로 독립된 복사본을 보존할 수 있는지 모르겠다.(누가 m(__)m)(※)
※ 추적
이것에 관해서 @kan 선생님께서 나에게 평론을 주셨다.댓글란을 꼭 확인하세요.
또 함수도 메모리를 절약하려는 의도가 있는 것 같다.→ Understanding Vue.js Component Instancing - Alligator.io
메시지 고마워요!
현재, 구성 요소에 메시지를 직접 쓰는 것을 피했지만, 예를 들어, 복사를 변경하고 메시지 구성 요소의 메시지를 단독으로 표시하려면 어떻게 하시겠습니까?스크립트 부분도 복사해야 합니다.이런 말은 통용성이 높다고 말할 수 없다.<message> 탭에 표시할 정보를 수신하는 사용자 정의 속성을 지정하면 됩니다.

구성 요소 (props에 메시지를 전달하고 표시하는 구성 요소)

이를 실현하려면 메시지 구성 요소에 <message content="Let's enjoy Vue!"> 옵션을 지정하십시오.사용자 정의 속성으로 지정할 속성 이름을 그룹으로 전달합니다.

<div id="app4">
    <message content="[app4] Let's enjoy Vue!"></message>
    <message content="[app4] Hello Vue world!"></message>
</div>
<script>
    Vue.component('message', {
        template: '<div>{{ content }}</div>',
        props: ['content'],
    })

    new Vue({
        el: '#app4',
    });
</script>

props 옵션을 사용하면 사용자 정의 속성을 통해 메시지 구성 요소에 단독 메시지를 전달할 수 있습니다.
이번에는 여기까지.