Vue에서 사용자 정의 전역 구성 요소를 만드는 방법은 무엇입니까?

이 글에서는 주로 Vue Custom Global Components(Custom Plug-in)의 사용법을 소개하고 참고하겠습니다.

저희가 개발을 하다 보면 플러그인을 직접 작성하고, 자체 플러그인을 사용하고 싶을 때가 있는데, 그게 강한 성취감을 줍니다. 최근 블로거들이 element-ui와 axios를 연구했을 때 이들이 맞춤 구성 요소라는 사실을 발견했지만, 유일한 차이점은 element-ui를 사용할 때는 Vue.use() 문을 사용하는 반면, axios를 사용할 때는 Vue.use( ), import만 가능합니다. 매우 마술적인 느낌이 듭니다. Axios에는 설치 방법이 작성되어 있지 않은 반면, element-ui에는 이 방법이 작성되어 있기 때문에 차이점이 있다는 것을 주의 깊게 알아냈습니다. 자신의 플러그인.

먼저 이 플러그인을 작성하기 전에 플러그인을 저장할 디렉터리를 생성하세요. 저는 블로거로서 컴포넌트의 로딩 디렉터리인

에 넣었습니다. 이 디렉터리에는 블로거의 습관에 따라 index.js 파일과 index에 작성된 컴포넌트 loading.vue를 작성합니다. js loading.vue 설치방법에 관한 내용입니다. 코드는 다음과 같습니다.

import LoadingComponent from './Loading.vue'

const Loading={
  install:function (Vue) {
    Vue.component('Loading',LoadingComponent)
  }
}
export default Loading

설치 메소드는 main.js에 표시됩니다. Vue.use() 메소드를 사용하는 경우 이 메소드는 기본적으로 설치 메소드를 호출합니다. 컴포넌트는 설치 메소드에도 등록되는데 여기서 'Loading'은 App.vue 외부에서 사용하는 컴포넌트 이름을 의미하고, LoadingComponent는 위에서 인용한 Loading.vue를 의미합니다. 그런 다음 내보내기 기본 로드를 통해 내보냅니다.

그러면 Loading.vue 코드는 다음과 같습니다.

<template>
  <p class="loading-box">
    Loading...
  </p>
</template>
<script></script>

Loading.vue 코드를 작성한 후 기본 main.js 파일로 import하고, Vue.use를 이용해서 방금 작성한 index.js를 import합니다. () 메소드:

import Vue from 'vue'
import App from './App.vue'
import Loading from './components/loading'
Vue.use(Loading)
new Vue({
 el: '#app',
 render: h => h(App)
})

그런 다음 App.vue 메소드의 템플릿을 사용하세요.

<template>
 <p id="app">
  <Loading></Loading>
 </p>
</template>

또한 지금 바로 loading.vue 파일에 캘린더 플러그인 작성, 버튼 작성 등 자신만의 코드를 작성할 수도 있습니다. 플러그인 등 예를 들면 다음과 같습니다.

<template>
  <p class="loader">
    <p class="loader-inner ball-spin-fade-loader">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </p>
  </p>
</template>
<style scoped>
  .loader{
    width:80px;
    height: 80px;
    margin:50px auto;
  }
  @keyframes ball-spin-fade-loader {
    50% {
      opacity: 0.3;
      -webkit-transform: scale(0.4);
      transform: scale(0.4); }

    100% {
      opacity: 1;
      -webkit-transform: scale(1);
      transform: scale(1); } }

  .ball-spin-fade-loader {
    position: relative; }
  .ball-spin-fade-loader > p:nth-child(1) {
    top: 25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
    animation: ball-spin-fade-loader 1s 0s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(2) {
    top: 17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
    animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(3) {
    top: 0;
    left: 25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
    animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(4) {
    top: -17.04545px;
    left: 17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
    animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(5) {
    top: -25px;
    left: 0;
    -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
    animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(6) {
    top: -17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
    animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(7) {
    top: 0;
    left: -25px;
    -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
    animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
  .ball-spin-fade-loader > p:nth-child(8) {
    top: 17.04545px;
    left: -17.04545px;
    -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
    animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
  .ball-spin-fade-loader > p {
    background-color: #399;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute; }
</style>

효과는 회전하는 원입니다.

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue에서 인덱스 파일을 컴파일, 패키징 및 보는 방법

vue에서 Jade 템플릿을 사용하는 방법

템플릿을 Angular의 구성 요소에 전달

위 내용은 Vue에서 사용자 정의 전역 구성 요소를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!