집 >웹 프론트엔드 >JS 튜토리얼 >Vue 컴포넌트란 무엇인가요? Vue 구성 요소 소개

Vue 컴포넌트란 무엇인가요? Vue 구성 요소 소개

不言원래의: 2018-08-07 13:48:064347검색

Vue 컴포넌트란 무엇인가요? 구성 요소는 재사용 가능한 Vue 인스턴스입니다. 이는 본질적으로 데이터, 계산, 감시, 메서드, 필터 및 Vue 구성 요소 수명 주기 후크와 같은 멤버 속성을 포함하는 객체입니다. 이 기사에서는 Vue 구성 요소의 내용에 대해 자세히 소개합니다.

먼저 컴포넌트 구조를 살펴보겠습니다:

{
  data(){
    return {
      //
    }
  },
  computed:{
    displayName(){
      return '';
    }
  },
  methods:{
    onClickHandler(params){
      // do something
    }
  }
}

기본 지식:

data 속성

data 속성은 컴포넌트의 내부 상태를 유지하며, 일반적인 상황에서는 다른 컴포넌트가 보이지 않습니다. .

현재 변경 사항을 모니터링하는 방법을 모르겠습니다.

계산된 속성과 청취 속성 감시는 반응형 종속성의 변경만 모니터링할 수 있고 $refs는 반응하지 않기 때문입니다.

props를 통해 하위 구성 요소에 전달할 수 있습니다.

$emit를 통해 상위 구성 요소에 전달할 수 있습니다.

this.$refs.ref를 통해 마운트된 수명 주기 동안 하위 구성 요소의 내부 상태를 얻을 수 있습니다. $data;

구성요소의 데이터 옵션은 함수여야 합니다.

  data选项有两种定义方式：
  
  一、对象形式：
  
  ```
  data:{
    //引用该组件的地方，共用一个状态的引用，以至于，只要有一处修改了$data中的某一属性值，其它引用该组件的地方也跟随着改变该属性值（其实，不是跟随，本来就是同一个指向）。
  }
  ```
  
  二、函数形式：
  
  ```
  data(){
    return {
      //引用该组件的地方，每一个组件都会获得独立的引用，互不干扰。
    }
  }
  ```

계산된 속성, 메소드 속성, 필터

difference	method	computed	filter
type	function	데이터 변수	함수
사용	이벤트 처리 함수로	데이터로	파이프 기호로
Scope	컴포넌트 내	컴포넌트 내	컴포넌트 내(로컬 등록), 글로벌(글로벌 등록)
매개변수	can 매개변수 있음	매개변수 없음(비함수)	매개변수 있음
반환 값	필요하지 않음	있어야 함	있어야 함
트리거됨	상호 작용 시 트리거됨	관련 항목 종속성 변경이 발생할 때만 재평가됩니다	수신 데이터가 변경될 때 실행됩니다

참고:

$refs와 같이 Vue의 모든 속성이 변경 사항을 모니터링할 수 있는 것은 아닙니다. 구성 요소 구축의 주요 차이점은

템플릿이 생성되는 방식

입니다.

템플릿 정의 방법

템플릿 옵션

문자열 템플릿

HTML 태그 구조로 구성된 문자열

예:

{
  template: '<h1>简单示例</h1>',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

ID 선택기로 지정된 템플릿

ID가 있는 HTML 조각

예:

<script>
  <h1 v-if="level === 1">
    简单示例
  
</script>
{
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

render

이 함수는 VNode를 생성하기 위한 첫 번째 매개변수로 createElement 메소드를 받습니다.

createElement는 세 가지 매개변수를 받습니다. 노드 유형, 구성 요소 구성 개체, 하위 노드(구성 요소 구성 개체에 대한 공식 설명)

예:

{
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

vue 단일 파일 구성 요소

단일 파일 구성 요소는 분리되어 저장된 구조의 템플릿, 로직 및 스타일을 결합합니다. 같은 파일.

<template>
  <div>
    ...
  </div>
</template>
<script>
...
export default{
  ...
}
...
</script>
<style>
...
</style>

플랜 선택

템플릿한 줄의 간단한 구조

注意：不论选择哪一种方案，定义模板时，一定要有一个非template标签元素作根DOM，有且仅有一个。

vue组件注册方式

局部注册

以上几种方案定义的组件本质上都是一个对象，获取该对象（假设变量名为TabBar），要求只在另一个组件(假设变量名为App)内使用：

App组件的配置对象：

{
  components:{
    'tab-bar': TabBar,
  }
}

这样就是局部注册，该组件TabBar只能在App模板中使用<tab-bar></tab-bar>，其它组件对TabBar不可见。

全局注册

以上几种方案定义的组件本质上都是一个对象，获取该对象（假设变量名为TabBar），要求项目内任何组件可使用：

一般在项目的入口文件（如：脚手架搭建项目的main.js）中：

Vue.component('tab-bar',TabBar);

这样就是全局注册，该组件TabBar能在整个项目内使用<tab-bar></tab-bar>，所有组件对TabBar可见。

vue组件生命周期钩子

以下用自己的语言将生命周期钩子表述一下：

Vue 컴포넌트란 무엇인가요? Vue 구성 요소 소개

beforeCreate

在这个时候，生命周期函数已经准备好。

组件实例已经构建，但本组件实例的数据、方法还没有注入；

可以在各个生命周期内通过组件实例this调用根实例上注入的$router、$store等对象。

可以在本生命周期内进行数据初始化；

created

在这个时候，当前组件实例this上的属性（$data、props、$methods...）已经注入绑定，可以调用本实例上的成员属性；

beforeMount

在进入本生命周期之前，会进行以下判断：

是否有el选项（指定挂载目标）：

有el选项的是根实例；

没有el选项的是非根实例（默认挂载元素为组件调用的位置）；

是否有template选项：

有template选项的是内联模板；

没有template选项的是单文件组件；

个人觉得，还有render选项的判断；

最终这些模板都会转换为render函数进行渲染！！！

这个生命周期在解析模板，不知道有什么实际用途。

mounted

在本生命周期之前，已经将模板渲染为真实DOM，其中vm.$el为组件实例的根DOM元素；

本生命周期是初始化第三方插件的场所；

必要时候，可以在本生命周期内对DOM进行操作；

本生命周期是获取this.$refs.ref的场所；

Vue 컴포넌트란 무엇인가요? Vue 구성 요소 소개

ID가 있는 HTML 조각

全局注册

관련 기사