Vue.js => 소품

비고

camelCase <=> 케밥 케이스

props 의 이름을 정의 할 때 HTML 속성 이름은 대소 문자를 구별하지 않습니다. 즉, 구성 요소 정의에서 낙타의 경우 prop 을 정의하면 ...

Vue.component('child', {
    props: ['myProp'],
    ...
});

... HTML 구성 요소에서 my-prop로 호출해야합니다.

소품이있는 부모에서 자식에게 데이터 전달

Vue.js에서 모든 구성 요소 인스턴스에는 자체 격리 된 범위 가 있습니다. 즉, 부모 구성 요소에 하위 구성 요소가있는 경우 하위 구성 요소에는 자체 격리 된 범위가 있고 부모 구성 요소에는 자체 격리 된 범위가 있습니다.

중형 내지 대형 응용 프로그램의 경우 모범 사례 관행에 따라 개발 단계 및 유지 관리 중 많은 골칫거리를 예방할 수 있습니다. 따라야 할 사항 중 하나는 하위 구성 요소에서 상위 데이터를 직접 참조 / 변경 하는 것을 피하는 것입니다. 그런 다음 하위 구성 요소 내에서 상위 데이터를 어떻게 참조할까요?

자식 구성 요소에 필요한 부모 데이터가 무엇이든 관계없이 부모로부터 props 으로 전달되어야합니다.

사용 사례 : 다음 두 필드가있는 users 및 addresses 테이블 두 개가있는 사용자 데이터베이스가 있다고 가정합니다.
users 표

이름	전화	이메일
존 클랜	(1) 234 5678 9012	[email protected]
제임스 본드	(44) 777 0007 0077	[email protected]

addresses 표

블록	거리	시티
나카 토미 타워	브로드 웨이	뉴욕
Mi6 하우스	버킹엄로드	런던

앱의 어느 곳에서나 해당 사용자 정보를 표시하는 세 가지 구성 요소가 필요합니다.

user-component.js

export default{
    template:`<div class="user-component">
                <label for="name" class="form-control">Name: </label>  
                <input class="form-control input-sm" name="name" v-model="name">
                <contact-details :phone="phone" :email="email"></contact-details>
              </div>`,
    data(){
        return{
            name:'',
            phone:'',
            email:''
        }
    },
}

contact-details.js

import Address from './address';
export default{
    template:`<div class="contact-details-component>
                <h4>Contact Details:</h4>
                <label for="phone" class="form-control">Phone: </label>  
                <input class="form-control input-sm" name="phone" v-model="phone">
                <label for="email" class="form-control">Email: </label>  
                <input class="form-control input-sm" name="email" v-model="email"> 
        
                <h4>Address:</h4>
                <address :address-type="addressType"></address>
                //see camelCase vs kebab-case explanation below
            </div>`,
    props:['phone', 'email'],
    data:(){
        return:{
            addressType:'Office'
        }
    },
    components:{Address}  
}

address.js

export default{
    template:`<div class="address-component">
                <h6>{{addressType}}</h6>
                <label for="block" class="form-control">Block: </label>  
                <input class="form-control input-sm" name="block" v-model="block">
                <label for="street" class="form-control">Street: </label>  
                <input class="form-control input-sm" name="street" v-model="street">
                <label for="city" class="form-control">City: </label>  
                <input class="form-control input-sm" name="city" v-model="city">
             </div>`,
    props:{
        addressType:{
            required:true,
            type:String,
            default:'Office'
        },
    data(){
        return{
            block:'',
            street:'',
            city:''
        }
    }
}

main.js

import Vue from 'vue';  
  
Vue.component('user-component', require'./user-component');  
Vue.component('contact-details', require'./contact-details');  

new Vue({
    el:'body'  
});

index.html

...  
<body>
    <user-component></user-component>
        ...
</body>

전화 또는 이메일 데이터가없는 contact-details 정보의 user-component 속성 인 phone 및 email 데이터가 표시됩니다.

데이터를 소품으로 전달

따라서 <contact-details> 구성 요소를 포함하는 템플릿 속성의 user-component.js 내에서 <user-component> (부모 구성 요소)의 전화 및 전자 메일 데이터를 <contact-details> ( 하위 구성 요소)을 호출합니다. - :phone="phone" and :email="email v-bind:phone="phone" 와 동일한 :email="email v-bind:phone="phone" 및 v-bind:email="email"

소품 - 다이나믹 바인딩

우리가 부모 컴포넌트, 즉 <user-component> 내의 전화 또는 전자 메일의 모든 변경 사항을 하위 요소 즉, <contact-details> 즉시 반영 할 것이기 때문에 소품을 동적으로 바인딩합니다.

소품 - 리터럴

그러나 전화 및 이메일 값을 phone="(44) 777 0007 0077" email="[email protected]" 과 같은 문자열 리터럴 값으로 전달하면 부모에서 발생하는 데이터 변경 사항은 반영되지 않습니다 구성 요소.

단방향 바인딩

기본적으로 변경 방향은 위에서 아래입니다. 즉, 부모 구성 요소의 동적으로 바인딩 된 소품에 대한 변경 사항은 하위 구성 요소로 전파되지만 하위 구성 요소의 받침 값 변경 사항은 상위 구성 요소로 전파되지 않습니다.

예를 들면 다음과 같습니다 내에서 경우 <contact-details> 우리의 이메일을 변경 [email protected] 에 [email protected] 에서 부모 데이터, 즉 전화 데이터 속성 <user-component> 여전히 값이 포함됩니다 [email protected] .

그러나 전자 메일의 값을 부모 구성 요소 (이 경우에는 <user-component> )의 [email protected] 에서 [email protected] 로 [email protected] 하면 하위 구성 요소의 전자 메일 값 ( <contact-details> )이 자동으로 [email protected] 으로 변경됩니다. 부모의 변경 사항이 즉시 자식에게 전파됩니다.

양방향 바인딩

양방향 바인딩을 원할 경우 명시 적으로 양방향 바인딩을 다음과 같이 지정해야합니다 :email.sync="email" 대신 :email="email" . 이제 자식 구성 요소에서 prop의 값을 변경하면 변경 내용이 부모 구성 요소에도 반영됩니다.

중대형 응용 프로그램에서 하위 상태에서 부모 상태로 바뀌면 디버깅하는 동안 탐지하고 추적하기가 매우 어려워집니다. 특히 조심하십시오 .

Vue.js 2.0에는 .sync 옵션이 없습니다. Vue.js 2.0에서는 소품 용 양방향 바인딩이 사용되지 않습니다 .

1 회 바인딩

명시 적 일회 바인딩을 :email.once="email 과 같이 정의 할 수도 있습니다 :email.once="email , 부모 속성 값의 후속 변경 사항이 자식에게 전달되지 않으므로 리터럴 전달과 다소 비슷합니다.

경고
Object 또는 Array 가 소품으로 전달되면 항상 참조 로 전달됩니다. 이는 명시 적으로 정의 된 바인딩 유형에 관계없이 다음을 의미합니다 :email.sync="email" 또는 :email="email" 또는 :email.once="email" 전자 메일이 부모의 Object 또는 Array 인 경우 바인딩 유형에 관계없이 하위 구성 요소 내의 prop 값이 변경되면 상위의 값에도 영향을줍니다.

배열로 소품

contact-details.js 파일에서 우리는 props:['phone', 'email'] 정의했다 props:['phone', 'email'] 배열로서, 소품으로 미세한 제어를 원하지 않는다면 괜찮을 것이다.

객체로서의 소품

소품보다 더 세밀하게 제어하고 싶다면

어떤 종류의 값이 소품으로 받아 들여 지는지 정의하고 싶다면
소품의 기본값은 무엇입니까?
값이 반드시 소품을 위해 전달되어야하는지 (필수) 아니면 선택 사항인지 여부

address.js 에서했던 것처럼 객체 표기법을 사용하여 소품을 정의해야합니다.

팀에서 다른 개발자가 사용할 수있는 재사용 가능한 구성 요소를 제작하는 경우에는 구성 요소를 사용하는 모든 사람이 데이터 유형이 무엇인지 명확하게 파악할 수 있도록 소품을 객체로 정의하는 것이 좋습니다. 그것은 의무적이거나 선택 사항입니다.

소품 유효성 확인 이라고도합니다. 이 유형 은 다음 네이티브 생성자 중 하나 일 수 있습니다.

끈
번호
부울
정렬
목적
기능
또는 맞춤 생성자

http://vuejs.org/guide/components.html#Props 에서 가져온 소품 유효성 확인의 몇 가지 예

Vue.component('example', {
   props: {
       // basic type check (`null` means accept any type)
       propA: Number,
       // multiple possible types (1.0.21+)
       propM: [String, Number],
       // a required string
       propB: {
         type: String,
         required: true
       },
       // a number with default value
       propC: {
          type: Number,
          default: 100
       },
       // object/array defaults should be returned from a
       // factory function
       propD: {
          type: Object,
          default: function () {
             return { msg: 'hello' }
         }
       },
       // indicate this prop expects a two-way binding. will
       // raise a warning if binding type does not match.
       propE: {
          twoWay: true
       },
       // custom validator function
       propF: {
          validator: function (value) {
             return value > 10
          }
       },
       // coerce function (new in 1.0.12)
       // cast the value before setting it on the component
       propG: {
          coerce: function (val) {
            return val + '' // cast the value to string
          }
       },
       propH: {
          coerce: function (val) {
            return JSON.parse(val) // cast the value to Object
          }
       }
    }
});

낙타 케이스 대 케밥 케이스

HTML 속성은 대소 문자를 구분하지 않으므로 addresstype 과 addressType 구별 할 수 없으므로 camelCase 소품 이름을 특성으로 사용할 때 케밥 케이스 (하이픈으로 구분)에 해당하는 것을 사용해야합니다.
addressType 은 HTML 속성의 address-type 으로 작성되어야합니다.

동적 소품

뷰에서 모델로 데이터를 바인딩 할 수있는 것처럼, 동일한 v-bind 지정 문을 사용하여 부모 요소에서 자식 구성 요소로 정보를 전달할 수도 있습니다.

JS

new Vue({
    el: '#example',
    data: {
        msg: 'hello world'
    }
});

Vue.component('child', {
    props: ['myMessage'],
    template: '<span>{{ myMessage }}</span>
});

HTML

<div id="example">
    <input v-model="msg" />
    <child v-bind:my-message="msg"></child>
    <!-- Shorthand ... <child :my-message="msg"></child> -->
</div>

결과

hello world

Vue JSX를 사용하는 동안 소품 전달하기

부모 구성 요소가 있습니다. 하위 구성 요소 가져 오기에서 속성을 통해 소품을 전달합니다. 여기에 속성은 'src'이고 'src'도 전달합니다.

ParentComponent.js

import ChildComponent from './ChildComponent';
export default {
    render(h, {props}) {
        const src = 'https://cdn-images-1.medium.com/max/800/1*AxRXW2j8qmGJixIYg7n6uw.jpeg';
        return (
           <ChildComponent src={src} />   
        );
    }
};

그리고 우리가 소품을 전달할 필요가있는 하위 구성 요소. 우리는 통과 할 소품을 지정해야합니다.

ChildComponent.js :

export default {
    props: ['src'],
    render(h, {props}) {
        return ( 
            <a href = {props.src} download = "myimage" >
                Click this link
            </a>
        );
    }
};

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

Vue.js
소품

수색…

비고