VueJS 플러그인에서 VueJS 컴포넌트로 데이터 전달

VueJS 용 로딩 막대 플러그인을 만들고 플러그인을 사용하여 VueJS 컴포넌트 (플러그인의 일부)의 데이터를 제어하려고합니다.VueJS 플러그인에서 VueJS 컴포넌트로 데이터 전달

import VueLoadingBar from 'path-to-plugin'; 

Vue.use(VueLoadingBar);

는 다양한 구성 요소에서 App.vue

에서 플러그인 구성 요소

<template> 
    <div id="app"> 
    <vue-loading-bar><vue-loading-bar> 
    </div> 
</template>

을 포함

이

은 main.js에서 플러그인을 포함 :

그래서 결국 나는 다음을 수행 할 진행률 표시 줄 (예 : Youtube)을 this.$loadingBar.start()으로 움직이게하고 싶습니다.

내 플러그인은 자바 스크립트 파일 플러그인 구성되어 있습니다 ...

import LoadingBar from './LoadingBar.vue'; 

const vueLoadingBar = { 
    install() { 
    const loadingBarModule = { 
     start() { 
     // Start animating by setting the computed `progress` variable in the component, for simple 
     // demonstration with setInterval 
     setInterval(() => { 
      // How do I set `progress` that updates the component. Or is there an even better way to solve this? 
     }, 500); 
     } 
    } 

    Vue.component('vue-loading-bar', LoadingBar); 

    Vue.prototype.$loadingBar = loadingBarModule; 
    } 
} 

export default vueLoadingBar;

... 그리고 .vue 파일 가장 좋은 방법은 무엇

<template> 
    <div class="c-loading-bar" :style="style"></div> 
</template> 

<script> 
    export default { 
    computed: { 
     style() { 
     return { 
      transform: `translateX(${this.progress}%)`, 
     } 
     }, 
     progress() { 
     return 0; 
     } 
     /* other computed data */ 
    } 
    } 
</script> 

<style> 
    .c-loading-bar { 
    position: fixed; 
    top: 0; 
    z-index: 20; 
    height: 5px; 
    background: red; 
    } 
</style>

을 "통제"를 LoadingBar 구성 요소 플러그인 내에서 (예 : this. $ loadingBar.start())? 관심있는 사람들을위한

출처

2017-02-16 Daniel

및 그것을 통제하기위한 진보 소품을합니까? 플러그인을 계속 사용하려면 진행을위한 소품을 받고 완료/시작을위한 일부 이벤트를 실행하십시오. – AfikDeri

@AfikDeri 응용 프로그램에 한 번만 구성 요소를 포함 시키겠다.하지만 여러 부분에서 제어 (로드 애니메이션 시작)하고 싶습니다. 내 응용 프로그램 (예 : AJAX, 라우팅, 일부 경우). 이후 내가 뭔가를로드 할 때마다 새로운 구성 요소를 포함하고 싶지 않기 때문에 나는 일종의 글로벌 "함수"가 필요합니다 (따라서 왜 이것이'. $ loadingBar'가 필요하다고 생각했는지). 플러그인에서 진행 및 화재 이벤트를위한 소품을 어떻게받을 수 있습니까? – Daniel

가 : install 기능을 결국, 나는 데이터 name

export default { 
    data() { 
    return { 
     name: 'UNIQUE_NAME', 
    }; 
    } 
}

을 내 구성 요소를주고 내 플러그인에 다음 코드를 추가

간단한 로더 구성 요소를하지 왜

Vue.mixin({ 
    created() { 
    if (this.name === 'UNIQUE_NAME') { 
     console.log('You can now access the component with', this); 
    } 
    }, 
});

출처

2017-02-19 21:41:42 Daniel

VueJS 플러그인에서 VueJS 컴포넌트로 데이터 전달

답변

관련 문제