집 >웹 프론트엔드 >JS 튜토리얼 >Vue에서 구성 요소를 사용하는 단계에 대한 자세한 설명

Vue에서 구성 요소를 사용하는 단계에 대한 자세한 설명

php中世界最好的语言원래의: 2018-05-03 10:36:042925검색

이번에는 Vue에서 컴포넌트 컴포넌트를 사용하는 단계에 대해 자세히 설명하겠습니다. 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 './mixins'
export default {
 mixins: [mixins],
 methods: {
  getFormData() {
   return { email: 'example@example.com' }
  }
 }
}
</script>

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

테이블 적용

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

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

<template>
 <vue-table ref="table" :columns="columns" :datum="datum"></vue-table>
</template>
<script>
export default {
  data () {
   return {
    columns: [
     { title: 'ID', width: '30', dataKey: 'id' },
     { title: '进度组件', dataKey: 'progress', render: { type: 'progress2', max: 100, precision: 2 } }
    ],
    datum: [{ id: '1', name: '进度0', 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: 'name',
      label: '名称',
      type: 'textfield',
      attrs: { placeholder: '名称' },
      validate: { required: { message: '请输入名称'} }
     },
     {
      field: 'enable',
      label: '启用标志',
      type: 'dropdown',
      extra: {options: [{ label: '启用', value: 1 }, { label: '禁用', 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 기반 백엔드 엔진 오픈 소스 프로젝트에서 구현됩니다. 스타 앤 포크를 환영합니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!