Vue.js
구성 요소
수색…
비고
In 구성 요소 :
props 는 부모 구성 요소에서 데이터를 전달하는 데 사용되는 문자열 리터럴 또는 객체 참조의 배열입니다. 또한 기본값을 지정하는 것, 허용 된 데이터의 유형, 필요 또는 선택 사항과 같은 더 세분화 된 제어가 필요한 경우 오브젝트 형식이 될 수 있습니다
데이터 는 일반 객체 대신 객체를 반환하는 함수 여야합니다. 재사용 성 목적으로 각 구성 요소의 인스턴스에 고유 한 데이터가 있어야하기 때문입니다.
이벤트 는 구성 요소가 동작 변경으로 응답 할 수있는 이벤트의 리스너가 포함 된 객체입니다.
구성 요소와 관련된 비헤이비어를 정의하는 함수가 포함 된 메서드 객체
계산 된 속성은 관찰자 또는 관찰 가능 항목과 동일합니다. 종속성이 변경 될 때마다 속성이 자동으로 다시 계산되고 DOM이 계산 된 속성을 사용하면 DOM에 즉시 반영됩니다
준비는 뷰 인스턴스의 라이프 사이클 후크입니다
범위가 지정된 구성 요소 (전역이 아님)
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) {}