집 > 기사 > 웹 프론트엔드 > Vue의 내장 구성 요소 구성 요소의 애플리케이션 시나리오에 대한 간략한 토론

Vue의 내장 구성 요소 구성 요소의 애플리케이션 시나리오에 대한 간략한 토론

亚连원래의: 2018-05-28 17:06:222130검색

이 글은 주로 Vue 내장 컴포넌트 컴포넌트의 적용 시나리오를 소개하고 참고용으로 제공합니다.

공식 지침

"메타 구성 요소"를 동적 구성 요소로 렌더링합니다. 렌더링되는 구성 요소는 is 값에 따라 다릅니다.

<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 -->
<component :is="componentId"></component>

자세한 내용은 공식 웹 사이트 문서에서

동적 구성 요소

내장 구성 요소 구성 요소

Scenario

를 참조하세요. 여기에서는 비즈니스 시나리오를 사용하여 Vue의 내장 애플리케이션을 설명합니다. -구성 요소 구성 요소. 그림과 같이 클래식 등록 페이지가 표시됩니다. 등록은 이메일 등록과 휴대폰 등록으로 구분됩니다. 팝업 창 상단에 등록 유형을 전환하는 라벨이 있습니다. 양식 정보입니다. 이메일 등록과 휴대폰 등록은 양식 내용이 다릅니다. 하단에는 등록 버튼과 기타 작업이 있습니다. 분석 결과, 휴대폰 등록 인터페이스와 이메일 등록 인터페이스는 중간 양식의 내용이 일치하지 않는 점을 제외하면 동일합니다.

실제 프로젝트 코드 설계에는 재사용성과 유지 관리성을 보장할 수 있는 몇 가지 실현 가능한 솔루션이 있습니다. 여기서는 이를 달성하기 위해 vue의 내장 구성 요소를 사용합니다.

핵심 코드 구현

상단 탭이 전환되면 타입 값이 변경되고, 해당 폼 컴포넌트도 변경됩니다

<template>
 <p>
	<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleCloseBtnClick"></a>
	<p>
	 <h3>新用户注册</h3>
	 <p>
		<span :class="{active: type === &#39;mobileForm&#39;}" @click="type = mobileForm">手机注册</span>
		<span :class="{active: type === &#39;emailForm&#39;}" @click="type = emailForm">邮箱注册</span>
	 </p>
	</p>
	<component :is="type" ref="form">
	 <button @click="handleRegisterBtnClick">注册</button>
	 <p ><span ><span>注册视为同意</span><a> 《法律条款和隐私说明》</a></span></p>
	 <p><span>已有账号<a href="javascript:;" rel="external nofollow" rel="external nofollow" @click.prevent="handleLoginBtnClick">直接登入>></a></span></p>
	</component>
 </p>
</template>
<script>
 export default {
 	methods: {
		handleRegisterBtnClick () {
		 	this.$refs.form.validateData().then(() => {
				this.$refs.form.getFormData()
			})
		 }
	}
 }
</script>

mixins mixins

Vue 내장 컴포넌트 컴포넌트를 사용할 때, 일반적으로 실제로 렌더링되는 구성 요소에는 동일한 속성, 동일한 방법 또는 동일한 초기화 및 소멸 프로세스와 같은 특정 공통점이 있습니다. 예를 들어, 현재 시나리오에서는 이메일 양식과 휴대폰 양식 모두 확인 방법(validateData)과 양식 데이터를 가져오는 방법(getFormData)이 있습니다. 이 경우 vue에서 제공하는 하이브리드 기능을 사용할 수 있습니다. 추가 추상화 mixins.js

export default {
 methods: {
  validateData() {
   return Promise.resolve()
  },
  getFormData() {
   return {}
  }
 }
}

email-form.vue

<script>
import minx from &#39;./mixins&#39;
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: &#39;example@example.com&#39; }
  }
 }
}
</script>

맞춤형 요구 사항이 있는 경우 mixins의 메서드를 재정의할 수 있습니다.

테이블 적용

관리 백그라운드 프로젝트에서는 테이블을 자주 사용합니다. 테이블의 td가 텍스트, 진행률 표시줄, 체크박스 등이길 바라며, json 구성을 전달하여 렌더링할 수 있기를 바랍니다. Vue에 내장된 구성 요소를 사용하면 큰 역할을 할 수 있습니다.

예를 들어 이런 테이블 사용법

<template>
 <vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
  data () {
   return {
    columns: [
     { title: &#39;ID&#39;, width: &#39;30&#39;, dataKey: &#39;id&#39; },
     { title: &#39;进度组件&#39;, dataKey: &#39;progress&#39;, render: { type: &#39;progress2&#39;, max: 100, precision: 2 } }
    ],
    datum: [{ id: &#39;1&#39;, name: &#39;进度0&#39;, progress: 10 }]
   }
  }
 }
</script>

테이블에 컴포넌트 구현

<td v-for="column of columns">
	<component :is="`${TYPE_PRE}${columns.render.type}`" :row-data="rowData" :params="columns.render"></component>
</td>

폼 적용

관리 백그라운드 프로젝트에서는 폼이 자주 사용되는데 저희도 저 역시 양식의 항목 중 하나가 텍스트 상자, 드롭다운 상자, 시간 선택 상자, 서식 있는 텍스트 등이길 바라며, json 구성을 전달하여 렌더링할 수 있기를 바랍니다. Vue의 내장 컴포넌트는 여전히 아름다운 비전을 실현할 수 있습니다.

예를 들어 이런 양식을 사용하는 방법

<template>
  <c-form :cells="cells" ref="form">
   <button class="button is-primary" :class="{ &#39;is-disabled&#39;: isSubmitBtnDisabled }" @click.prevent="submit">提交</button>
  </c-form>
</template>
<script>
  export default {
  computed: {
   cells () {
    return [
     {
      field: &#39;name&#39;,
      label: &#39;名称&#39;,
      type: &#39;textfield&#39;,
      attrs: { placeholder: &#39;名称&#39; },
      validate: { required: { message: &#39;请输入名称&#39;} }
     },
     {
      field: &#39;enable&#39;,
      label: &#39;启用标志&#39;,
      type: &#39;dropdown&#39;,
      extra: {options: [{ label: &#39;启用&#39;, value: 1 }, { label: &#39;禁用&#39;, value: 2 }] }
     }
    ]
   }
  }
 }
</script>

양식에서 컴포넌트를 사용하는 구현

<form>
 <c-form-cell v-for="cell of cellList" :key="cell.field" :field="cell.field">
  <component
	 :is="`${TYPE_PRE}${cell.type}`"
	 :field="cell.field"
	 :attrs="cell.attrs"
	 :extra="cell.extra"
	 :validate="cell.validate"
	 :cells="cell.cells">
  </component>
 </c-form-cell>
</form>

위 내용은 제가 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다. .

Vue의 내장 구성 요소 구성 요소의 애플리케이션 시나리오에 대한 간략한 토론

관련 기사