Vue 어셈블리 등록 방법 해석

개요

구성 요소화된 개념은 전단 페이지 개발에 더욱 뚜렷한 구조를 가지게 했다.
Vue의 어셈블리는 Vue의 인스턴스 객체입니다.따라서 Vue 구성 요소의 구조 옵션과 new Vue () 방법으로 Vue 실례를 구성하는 구조 옵션은 같고 수신 가능한 구조 옵션은 같다.엘과 같은 루트 실례 특유의 옵션을 제외하고는단, Vue 구성 요소는 반드시 다시 사용할 수 있어야 하기 때문에 구성 옵션의 데이터 옵션은 하나의 함수이고 이 함수는 하나의 대상을 되돌려야 한다.
왜 데이터 옵션은 반환 대상의 함수로 구성 요소의 복용성을 보장할 수 있습니까?
new Vue () 의 방식이든 Vue 구성 요소를 정의하는 방식이든 Vue 실례를 만들고, 그 동작은 구조 옵션의 각 속성 값을 새로 만든 Vue 실례 대상에 직접 부여하기 때문이다.어셈블리 재사용은 동일한 구조 옵션을 사용하여 동일한 이름의 여러 주소의 Vue 인스턴스 객체를 구성하는 것입니다.만약 Vue 구성 요소가 정의할 때 구성 옵션의 데이터 옵션이 하나의 대상이라면, 구성 요소가 재사용될 때, 여러 구성 요소가 하나의 데이터 대상을 함께 사용하게 됩니다. 왜냐하면 데이터 대상의 주소를 구성 요소에 직접 부여하는 Vue 실례이기 때문입니다.그러나 구성 요소가 정의된 데이터 옵션이 함수라면, 구성 옵션에 따라 구성 요소를 만들 때 이 함수를 실행하여 대상을 얻을 수 있습니다.이렇게 되면 Vue 실례를 만들 때마다 데이터 대상은 다시 생성되기 때문에 여러 구성 요소는 각자의 데이터 대상을 가지고 서로 영향을 주지 않는다.
실제로 어셈블리를 등록할 때는 어셈블리의 구성 옵션을 정의하고 어셈블리를 사용할 때 해당하는 Vue 어셈블리 인스턴스를 생성합니다.

1. 글로벌 등록

전역으로 등록된 구성 요소는 Vue 루트 인스턴스와 모든 서브어셈블리에서 사용할 수 있습니다.등록 포털은 Vue입니다.component () 함수, 한 번 등록하면 언제든지 사용할 수 있습니다. 등록 방식은 다음과 같습니다.

Vue.component('my-component-name',{ 
    options 
})

예는 다음과 같습니다.

//main.js
//  vue-cli  ， vue，  template  ，  render  。
Vue.component('all-test',{
  data(){
    return {
      x: ' '
    }
  },
  render(h){
    return h('div',this.x)
  }
})

// 
//App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

2. 부분 등록

로컬 등록은 일반적인 JavaScript 객체를 통해 구성 요소를 정의합니다.그리고 구성 요소의 이름과 등록 입구는 Vue 실례 구조 옵션의 components 옵션입니다.

let component = { options }

//new Vue   Vue  
new Vue({
    el: '#app'
    components: {
        'my-component-name': component
    }
})

//  Vue    Vue  
export default {
    components: {
        'my-component-name': component
    }
}

예는 다음과 같습니다.

//App.vue
<template>
  <div id="app">
    <all-test />
    <component-a />
    <component-b />
  </div>
</template>

<script>
let ComponentA = {
  data(){
    return {
      x: '  A'
    }
  },
  render(h){
    return h('div',this.x)
  }
}

export default {
  name: 'App',
  components: {
    'component-a': ComponentA,
    'component-b': {
        data(){
          return {
            x: '  B'
          }
        },
        render(h){
          return h('div',this.x)
        }
    } 
  }
}
</script>

3. 모듈 시스템의 부분 등록

Babel과 웹팩과 같은 모듈 시스템에서 import와 export 방식으로 구성 요소의 구조 옵션 대상을 단독으로 가져오거나 구조 옵션을 가져오는 *를 사용할 수 있습니다.vue 파일.

//c.js
export default {
    data(){
        return {
          x: '  c.js  '
        }
      },
      render(h){
        return h('div',this.x)
      }
}

//D.vue
<template>
    <div>
        {{x}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            x: '  D.vue  '
        }
    }
}
</script>

//App.vue
<template>
  <div id="app">
    <C />
    <D />
  </div>
</template>

import C from './c.js'
import D from './components/D.vue'

export default {
  name: 'App',
  components: {
    C,
    D 
  }
}
</script>

이상은 바로 Vue 구성 요소 등록 방식의 상세한 내용을 해독하는 것입니다. Vue 구성 요소 등록 방식에 대한 더 많은 자료는 저희의 다른 관련 글을 주목해 주십시오!