Vue의 렌더링 기능은 어떤 상황에서 사용하기에 적합합니까?

이 기사에서 제공하는 내용은 어떤 상황에서 Vue의 렌더링 기능을 사용하기에 적합합니까? 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

render function

vue는 템플릿을 사용하여 HTML을 생성합니다. 그러나 특별한 경우에는 이렇게 하드코딩된 모델이 요구 사항을 충족할 수 없으므로 js 프로그래밍 기능이 필요합니다. 이 시점에서 HTML을 생성하려면 render를 사용해야 합니다.

어떤 상황에서 렌더링 기능을 사용하는 것이 적절한가요?

공통 버튼 구성 요소 집합을 한 번에 캡슐화하는 과정에서 버튼에는 네 가지 스타일(성공, 오류, 경고, 기본값)이 있습니다. 우선, 다음 구현을 생각해 보세요

  <div class="btn btn-success" v-if="type === &#39;success&#39;">{{ text }}</div>
  <div class="btn btn-danger" v-else-if="type === &#39;danger&#39;">{{ text }}</div>
  <div class="btn btn-warning" v-else-if="type === &#39;warning&#39;">{{ text }}</div>

버튼 스타일이 적을 때는 이렇게 작성해도 괜찮지만, 필요한 버튼 스타일이 10개 이상이라면 상상해 보세요. 그렇다면 하드코딩된 템플릿 방식은 매우 약한 것 같습니다. 이런 상황에서는 렌더 기능을 활용하는 것이 최선의 선택이라고 할 수 있습니다.

실제 상황에 맞게 버튼 컴포넌트를 다시 작성하세요

우선 렌더링 기능으로 생성된 콘텐츠는 템플릿의 콘텐츠와 동일하므로, 렌더링 기능을 사용할 때는 템플릿 태그를 제거해야 합니다. 먼저 .vue 파일에서. 논리적 계층만 남습니다.

export default {
  props: {
    type: {
      type: String,
      default: 'normal'
    },
    text: {
      type: String,
      default: 'normal'
    }
  },
  computed: {
    tag() {
      switch (this.type) {
        case 'success':
          return 1;
        case 'danger':
          return 2;
        case 'warning':
          return 3;
        default:
          return 1;
      }
    }
  },
  render(h) {
    return h('p', {
      class: {
        btn: true,
        'btn-success': this.type === 'success',
        'btn-danger': this.type === 'danger',
        'btn-warning': this.type === 'warning'
      },
      domProps: {
        innerText: this.text
      },
      on: {
        click: this.handleClick
      }
    });
  },
  methods: {
    handleClick() {
      console.log('-----------------------');
      console.log('do something');
    }
  }
};

컴포넌트 기반 사고에 따르면 추상화할 수 있는 모든 것은 논리로 하드 코딩해서는 안 됩니다. 여기의 clickHandle 함수는 버튼 유형에 따라 다른 로직을 트리거할 수 있으므로 자세히 설명하지 않겠습니다.

그런 다음 jsx

를 사용하여 상위 구성 요소에서

<Button type="danger" text="test"></Button>

를 호출합니다. 예, 각 매개 변수의 유형과 사용법을 기억하는 것이 너무 번거롭습니다. 매개 변수를 순서대로 전달하는 것은 정말 번거롭습니다. 그러면 실제로 jsx를 사용하여 이 지루한 프로세스를 최적화할 수 있습니다.

아아아아

위 내용은 Vue의 렌더링 기능은 어떤 상황에서 사용하기에 적합합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!