이 글에서는 주로 Vue에서 렌더링 기능을 사용하는 방법을 소개하고 참고하겠습니다.
render function
vue는 템플릿을 사용하여 HTML을 생성합니다. 그러나 특별한 경우에는 이렇게 하드코딩된 모델이 요구 사항을 충족할 수 없으므로 js 프로그래밍 기능이 필요합니다. 이 시점에서 HTML을 생성하려면 render를 사용해야 합니다.
렌더링 기능은 언제 사용하는 것이 적절한가요?
공통 버튼 구성 요소 집합을 한 번에 캡슐화하는 과정에서 버튼에는 네 가지 스타일이 있습니다(기본 성공 오류). 우선, 다음 구현을 생각해 보세요.
<p v-if="type === 'success'">success</p> <p v-else-if="type === 'error'">error</p> <p v-else-if="type === 'warm'">warm</p> <p v-else>default</p>
버튼 스타일이 거의 없으면 문제가 없습니다. 하지만 필요한 버튼 스타일이 10개 이상인 경우 버튼의 텍스트는 다음에 따라 결정됩니다. 실제 상황(예: 성공 버튼 텍스트는 OK, GOOD 등일 수 있음) 그렇다면 하드코딩된 템플릿 방식은 매우 약한 것 같습니다. 이런 상황에서는 렌더 기능을 활용하는 것이 최선의 선택이라고 할 수 있습니다.
실제 상황에 맞게 버튼 컴포넌트를 다시 작성하세요
우선 렌더링 기능으로 생성된 콘텐츠는 템플릿의 콘텐츠와 동일하므로, 렌더링 기능을 사용할 때는 템플릿 태그를 제거해야 합니다. 먼저 .vue 파일에서. 논리적 계층만 남습니다.
export default { render(h) { return h('p',{ 'class': { btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }, domProps: { innerHTML: this.$slots.default[0].text }, on: { click: this.clickHandle } }) }, methods: { clickHandle() { // dosomething } }, props: { type: { type: String, default: 'default' }, text: { type: String, default: 'default' } } };
컴포넌트 기반 사고에 따르면 추상화할 수 있는 모든 것은 논리로 하드 코딩해서는 안 됩니다. 여기의 clickHandle 함수는 버튼 유형에 따라 다른 로직을 트리거할 수 있으므로 자세히 설명하지 않겠습니다.
그런 다음 jsx
를 사용하여 상위 구성 요소에서
<btn v-for="(btn, index) in testData" :type="btn.type" :text="btn.text" :key="index">{{btn.text}} </btn>
를 호출합니다. 예, 각 매개 변수의 유형과 사용법을 기억하는 것이 너무 번거롭습니다. 매개 변수를 순서대로 전달하는 것은 정말 번거롭습니다. 그러면 실제로 jsx를 사용하여 이 지루한 프로세스를 최적화할 수 있습니다.
return ( <p class={{ btn: true, success: this.type === 'success', error: this.type === 'error', warm: this.type === 'warm', default: this.type === 'default' }} onClick={this.clickHandle}> {this.$slots.default[0].text} </p> )
예 2:
유사한 컴포넌트를 작성할 때, 단순성(게으름이 사람을 발전시킨다)의 관점에서 이를 구현하는 더 적절한 방법을 찾아야 합니다. .
<body> <p id="app"> <mycomment :level="2"> 这是h2元素 </mycomment> </p> </body> <script type="text/x-template" id="is"> <p> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-if="level === 2"> <slot></slot> </h2> <h3 v-if="level === 3"> <slot></slot> </h3> <h4 v-if="level === 4"> <slot></slot> </h4> <h5 v-if="level === 5"> <slot></slot> </h5> <h6 v-if="level === 6"> <slot></slot> </h6> </p> </script> <script> Vue.component('mycomment',{ template:'#is', props:{ level:{ type:Number, required:true, } } }) var app =new Vue({ el:'#app', }) </script>
이때 Render 기능은 이 문제를 아주 잘 해결해 줍니다. 기본적인 뼈대라고 볼 수 있는 간단한 예제부터 시작해 보겠습니다.
<body> <p id="app"> <render-teample :level="4"> render function </render-teample> </p> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, this.$slots.default ) }, props: { level: { type: Number, required: true } } var app=new Vue({ el:"#app", }); </script>
그런 다음 원하는 스타일 필수 이벤트를 컴포넌트에 추가하여 만들어 보세요.
<body> <p id="app"> <render-teample :level="4" > <p class="jah" slot="myslot">render function</p> </render-teample> </p> </body> <script> Vue.component('render-teample',{ render:function(createElement){ return createElement( 'h'+this.level, { 'class':{ show:true, hide:false, }, style:{ width:'200px', height:'400px', background:'red', }, attrs:{ name:'h-ex', id:'h-id' }, props:{ myprops:true, }, on: { click: function(event){ alert(this.num) } }, nativeOn:{ click:function(event) { alert(1111) } } }, [ this.$slots.myslot, createElement('p',{ domProps:{ innerHTML:'holle render' } }) ] ) }, props: { level: { type: Number, required: true } } }); var app=new Vue({ el:"#app", data:{ num:110 } }); </script>
참고: VNode는 제약 조건 구성 요소에서 고유해야 합니다.
하나의 createElement() 아래에 모든 요소를 직접 작성하는 것은 매우 고통스럽고 유지 관리에도 도움이 되지 않습니다.
그래서 일반적으로
var com1= createElement('p','item1');var com2= createElement('p','item1');
return createElement('p',[com1,com2])
이 상황은 금지되어 있습니다. return createElement('p',[com1,com1])
위 내용은 제가 컴파일한 것입니다. 모두를 위해, 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
Node.js에서 mysql 트랜잭션 자동 재활용 연결을 구현하는 방법
js의 Promise에 대한 지식 포인트에 대한 자세한 소개
위 내용은 Vue에서 렌더링 기능의 기본 사용법(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!