VueJS-렌더링 기능
우리는 구성 요소와 그 사용법을 보았습니다. 예를 들어 프로젝트 전체에서 재사용해야하는 콘텐츠가 있습니다. 컴포넌트와 동일하게 변환하여 사용할 수 있습니다.
간단한 구성 요소의 예를 살펴보고 그 안에서 렌더링 기능이 수행해야하는 작업을 살펴 보겠습니다.
예
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>다음 스크린 샷과 같이 Hello World를 인쇄하는 간단한 구성 요소의 위 예제를 고려하십시오.
이제 구성 요소를 다시 사용하려면 다시 인쇄하면됩니다. 예를 들면
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>출력은 다음과 같습니다.
그러나 이제 구성 요소를 약간 변경해야합니다. 동일한 텍스트가 인쇄되는 것을 원하지 않습니다. 어떻게 바꿀 수 있습니까? 구성 요소 내부에 무언가를 입력하는 경우 고려됩니까?
다음 예를 살펴보고 어떤 일이 발생하는지 살펴 보겠습니다.
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>출력은 이전에 본 것과 동일하게 유지됩니다. 우리가 원하는대로 텍스트를 변경하지 않습니다.
구성 요소는 다음과 같은 것을 제공합니다. slots. 그것을 활용하고 원하는 결과를 얻었는지 확인합시다.
예
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>위의 코드에서 볼 수 있듯이 템플릿에 슬롯을 추가 했으므로 이제 다음 스크린 샷과 같이 구성 요소 내부로 보낼 값을받습니다.
이제 색상과 크기를 변경하고 싶다고 생각해 보겠습니다. 예를 들어, 현재 h1 태그를 사용하고 있으며 동일한 구성 요소에 대해 HTML 태그를 p 태그 또는 div 태그로 변경하려고합니다. 그렇게 많은 변화를 수행 할 수있는 유연성을 어떻게 가질 수 있습니까?
render 함수를 사용하면 가능합니다. Render 함수는 구성 요소를 동적으로 만들고 동일한 구성 요소를 사용하여 인수를 전달하는 데 도움을줌으로써 필요한 방식을 사용합니다.
예
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>위 코드에서 컴포넌트를 변경하고 다음 코드를 사용하여 props 속성이있는 render 함수를 추가했습니다.
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});소품은 다음과 같습니다.
props:{
elementtype:{
attributes:String,
required:true
}
}문자열 유형의 속성 필드를 사용하는 elementtype이라는 속성을 정의했습니다. 필드가 필수임을 언급하는 또 다른 필수 필드입니다.
render 함수에서 다음 코드와 같이 elementtype 속성을 사용했습니다.
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}Render 함수는 createElement를 인수로 사용하고 동일한 값을 반환합니다. CreateElement는 JavaScript에서와 같은 방식으로 DOM 요소를 생성합니다. 또한 attrs 필드의 값을 사용하여 요소 유형을 쉼표로 분할했습니다.
CreateElement는 만들 요소 태그로 첫 번째 매개 변수를 사용합니다. 다음 코드를 사용하여 구성 요소에 전달됩니다.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>컴포넌트는 위에 표시된 것처럼 props 필드를 가져와야합니다. :와 소품의 이름으로 시작합니다. 여기에서 요소 태그, 색상, 글꼴 크기 및 요소의 ID를 전달합니다.
render 함수에서는 createElement에서 쉼표로 분할하므로 첫 번째 요소는 다음 코드에서와 같이 createElemet에 제공되는 elementtag입니다.
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)a[0]html 요소 태그입니다. 다음 매개 변수는 요소 태그의 속성입니다. 다음 코드의 attr 필드에 정의됩니다.
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}요소 태그에 대해 두 가지 속성을 정의했습니다. id 과 style. id에게 쉼표로 나눈 값인 a [3]을 전달합니다. 스타일을 사용하여 색상과 글꼴 크기를 정의했습니다.
마지막은 슬롯, 즉 다음 코드에서 컴포넌트에 제공 한 메시지입니다.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>다음 코드를 사용하여 createElement에 인쇄 할 텍스트를 정의했습니다.
this.$slots.default컴포넌트 필드에 지정된 기본값을 사용합니다.
다음은 브라우저에서 얻은 출력입니다.
요소는 또한 구조를 보여줍니다. 다음은 우리가 정의한 구성 요소입니다.
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>