Vue.js
구성 요소

비고

범위가 지정된 구성 요소 (전역이 아님)

데모

HTML

<script type="x-template" id="form-template">
    <label>{{inputLabel}} :</label>
  <input type="text" v-model="name" />
</script>

<div id="app">
  <h2>{{appName}}</h2>
  <form-component title="This is a form" v-bind:name="userName"></form-component>
</div>

JS

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

구성 요소 란 무엇이며 구성 요소를 정의하는 방법은 무엇입니까?

Vue의 구성 요소는 위젯과 같습니다. 그것들은 우리가 원하는 행동으로 재사용 가능한 커스텀 엘리먼트를 작성할 수 있도록 해준다.

이것들은 렌더링 할 HTML 템플릿을 포함하여 루트 또는 임의의 Vue 인스턴스가 포함 할 수있는 옵션의 일부 또는 전부를 포함 할 수있는 객체 일뿐입니다.

구성 요소는 다음으로 구성됩니다.

• HTML 마크 업 : 구성 요소의 템플릿
• CSS 스타일 : HTML 마크 업 표시 방법
• JavaScript 코드 : 데이터 및 동작

이러한 파일은 각각 별도의 파일이나 .vue 확장명을 가진 단일 파일로 작성할 수 있습니다. 다음은 두 가지 방법을 보여주는 예입니다.

.VUE - 구성 요소의 단일 파일로

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

별도의 파일

hello-world.js - 구성 요소 객체의 JS 파일

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

hello-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

hello-world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

이 예제는 es2015 구문을 사용하므로 이전 브라우저의 경우 es5로 컴파일하는 데 Babel이 필요합니다.
Browserify + vueify 또는 Webpack + vue-loader 와 함께 Babel 은 hello-world.vue 를 컴파일해야합니다.

이제 hello-world 구성 요소가 정의되었으므로 Vue에 등록해야합니다.

이 작업은 두 가지 방법으로 수행 할 수 있습니다.

전역 구성 요소로 등록
main.js 파일 (앱 진입 점)에서 Vue.component 하여 모든 구성 요소를 전역으로 등록 할 수 있습니다.

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

또는 부모 구성 요소 또는 루트 구성 요소에 로컬로 등록

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

전역 구성 요소 는 Vue 응용 프로그램 내 어디에서나 사용할 수 있습니다.

로컬 구성 요소 는 등록 된 상위 구성 요소에서만 사용할 수 있습니다.

단편 구성 요소
자신이 조각 요소 이므로 뭔가를 할 수 없다는 콘솔 오류가 발생할 수 있습니다. 이런 종류의 문제를 해결하려면 <div> 와 같이 하나의 태그 안에 컴포넌트 템플릿을 래핑하면됩니다.

구성 요소의 로컬 등록

구성 요소는 전역 또는 로컬로 등록 할 수 있습니다 (다른 특정 구성 요소에 바인드).

var Child = Vue.extend({
    // ...
})

var Parent = Vue.extend({
    template: '...',
    components: {
         'my-component': Child
    }
})

Thiw의 새 구성 요소 ()는 상위 구성 요소의 범위 (템플릿)에서만 ​​사용할 수 있습니다.

인라인 등록

한 단계에서 구성 요소를 확장하고 등록 할 수 있습니다.

Vue.component('custom-component', {
    template: '<div>A custom component!</div>'
})

또한 구성 요소가 로컬에 등록 된 경우 :

var Parent = Vue.extend({
    components: {
        'custom-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

구성 요소의 데이터 등록

구성 요소를 등록 할 때 객체를 data 등록 data 전달하면 구성 요소의 모든 인스턴스가 동일한 데이터를 가리 킵니다. 이 문제를 해결하려면 함수에서 data 를 반환해야합니다.

var CustomComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

이벤트

구성 요소가 조상 / 자손과 통신 할 수있는 방법 중 하나는 사용자 정의 통신 이벤트를 통한 것입니다. 모든 Vue 인스턴스는 에미 터이며 구성 요소 트리 내에서의 통신을 용이하게하는 사용자 정의 이벤트 인터페이스를 구현합니다. 우리는 다음을 사용할 수 있습니다 :

• $on :이 구성 요소 상위 또는 하위 항목에서 방출 한 이벤트를 수신합니다.
• $broadcast : 모든 자손에게 아래쪽으로 전파되는 이벤트를 내 보냅니다.
• $dispatch : 먼저 구성 요소 자체에서 트리거하고 모든 상위 항목으로 위쪽으로 전파하는 이벤트를 내 보냅니다.
• $emit : 이벤트를 트리거합니다.

예를 들어 양식을 제출할 때 양식 구성 요소 내부의 특정 단추 구성 요소를 숨기려고합니다. 상위 요소 :

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

하위 요소 :

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

명심해야 할 몇 가지 사항 :

• 이벤트가 이벤트를 수신하고 트리거되는 구성 요소를 찾으면이 구성 요소의 함수 콜백이 true 반환하지 않는 한 전파가 중지됩니다.
• $dispatch() 항상 방출 한 구성 요소에서 먼저 트리거합니다.
• 이벤트 처리기에 인수를 여러 개 전달할 수 있습니다. this.$broadcast('submit-form', this.formData, this.formStatus) 사용하면 'submit-form': function (formData, formStatus) {} 과 같은 인수에 액세스 할 수 있습니다 'submit-form': function (formData, formStatus) {}