vuejs - webpacked 루트 인스턴스에 데이터를 전달하는 방법

Question

테이블에 데이터를 표시하기 위해 Single File Components을 사용하는 애플리케이션이 있습니다. 데이터는 search 문자열 및 결과에 포함하려는 열 (데이터는 기본적으로 ajax 요청에 의해 반입 됨)을 기반으로 쿼리됩니다.

제 목표는 쿼리 텍스트와 열 이름을 구성 요소에 전달할 수 있도록 재사용 가능한 구성 요소를 만드는 것입니다. 일반적으로 props과 slots을 사용할 수 있지만 이후로는 Single File Components을 사용하고 있는데 데이터를 구성 요소로 전달하는 방법을 모릅니다.

다음과 같이 " public"는 Single File Component에 인터페이스 같습니다

<!-- index.hmtl --> 
<div id="app"></div> 
<script src="./build/webpackedComponent.js"></script> 

---

// main.js/Component entry point 
import Vue from 'vue' 
import App from './components/app.vue' 

new Vue({ 
    el: '#app', 
    render: h => h(App) 
}) 

App 내부 내가 아약스 요청에 대한 데이터가 필요합니다. 내가 가진 아이디어는 컴포넌트의 메인 엔트리 포인트에 json 파일을 임포트하는 것이었지만, json을 변경할 때마다 컴포넌트를 재 패키징해야했고 컴포넌트를 여러 번 사용하기 위해 매번 팩할 필요가 있었다. 다른 데이터를 사용하는 모든 인스턴스 ...

아이디어가 있으십니까?

Answer 1

webpack.base.conf.js 파일 (내 프로젝트에서는 build 폴더 안에 위치) 또는 이와 동등한 구성 파일을 찾고 library: 'myLibrary'을 출력 개체에 추가하십시오. 전역 지금

// main.js/Component entry point 
import Vue from 'vue' 
import App from './components/app.vue' 

export { Vue, App }; 

을 그리고 :

(이 같은 결과가 발생해야한다 것은

module.exports = { 
    entry: { 
    app: ['./src/main.js'] 
    }, 
    output: { 
    library: 'myLibrary', 
    path: config.build.assetsRoot, 
    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 
    filename: '[name].js' 
    }, 
    . 
    . 
    . 

---

다음 main.js에서,이 같은 뷰를 내보낼 수 있습니다 :) 당신은 이것을 할 수 있습니다 :

new myLibrary.Vue({ 
    el: '#app', 
    data: { 
    value1: 12, 
    value2: 14 
    }, 
    components: { App: myLibrary.App }, 
    template: '<App :prop1="value1", :prop2="value2"></App>' 
}); 

즉, main.js에서 내보내는 내용은 webpack 구성 파일에서 제공 한 라이브러리의 이름 (이 경우 myLibrary)을 통해 전역 범위에 액세스 할 수 있습니다.