Vue에서 html 코드 용 구성 요소를 만드는 방법은 무엇입니까?

Question

그래서이 코드가 있습니다

<div class="input-field col s12 m6 l6"> 
    <input id="txtboxid" type="text" v-model="full_name"> 
    <label for="txtboxid">Middle Name *</label> 
</div> 

을 그리고 다른 ID의 및 모델의 가진 사람들을 많이 가지고 내 html 파일이 큰 보인다. vuejs를 더 짧게 만들 수있는 방법이 있습니까? 단 한 줄처럼 그것들을 가질 수 있습니까? 어떤 도움이라도 대단히 감사 할 것입니다.

Answer 1

질문에서 지적한 것처럼, 동일한 HTML 템플리트를 반복하여 사용하기 때문에 에 재사용 가능한 components을 만들 수 있습니다. 당신은 다음과 같은 코드에서 간단한 VUE component를 만들 수 있습니다

Vue.component('child', { 
    template: '\ 
    <div class="input-field col s12 m6 l6"> \ 
    <input :id="id" type="text" v-model="value"> \ 
    <label for="txtboxid">Middle Name *</label> \ 
</div> \ 
    ', 
    props: [ 
     "id", "value"], 
    watch: { 
    value: function(newVal){ 
     this.$emit('input', newVal) 
    } 
    } 
}) 

그리고 그것은 단지 하나의 라인을 사용하여 HTML에서 사용할 수 있습니다 :

<child v-model="full_name" id="24"></child> 

피들러 here 작업 확인하시기 바랍니다. 내가 watch 사용하고 위의 코드에서

, 당신은 또한 부모에 업데이트 full_name, 데모 here를 얻기 위해 변화 @change에 event handler를 사용할 수 있습니다.

일부 설명 : 여기 v-model을 사용하고

. 당신은 props으로 구성 요소의 구성 요소를 만들려면이를 사용 v-model에서 가변적이고을 보내과 이용 약관을 읽고 동의를 할 수

<input v-bind:value="something" v-on:input="something = $event.target.value"> 

: 본질적으로 문법 설탕을 여기 <input v-model="something">.