Vue.js 서드파티 스크립트에서 사용할 컴포넌트 데이터 속성을 표시하는 방법

Vue.js 서드파티 스크립트에서 사용할 컴포넌트 데이터 속성을 표시하는 방법

글로벌 네임스페이스를 오염시키지 않고 단일 파일 Vue 컴포넌트의 데이터 속성을 표시하는 가장 깨끗한 방법이 무엇인지 궁금합니다.

Vue의 메인 엔트리 파일(app.js)에서 다음과 같이 Vue를 설정합니다.

import components from './components/components';

window.app = new Vue({
    el: '#vue',

    store,

    // etc.
});

나의components.js는 HTML 스니펫으로 사용할 모든 컴포넌트를 Import합니다.이러한 컴포넌트 중 일부는 Import 컴포넌트 자체이며, 이 컴포넌트 자체에서는 컴포넌트로 직접 설정되어 있지 않습니다.root사례.

특정 단일 파일 Vue 구성 요소의 일부 데이터 속성을 표시하는 가장 좋은 방법은 무엇입니까?

예를 들어 저는Search.vue일련의 결과에서 처음 3개 개체를 Google Analytics로 전송하려는 구성 요소:

// Expose this on `Search.vue`:

data: {
    // Filled with data from ajax request.
    results: []
}

My Vue 인스턴스는 글로벌하게 사용할 수 있습니다.특정 컴포넌트에 쉽게 접근할 수 있는 방법이 있습니까?

편집

현재 최선의 옵션은 다음과 같은 Getter를 통해 내 자산(스토어 내에서 사용 가능)에 액세스하는 것입니다.

this.$store.getters.propertyINeed

이를 개선하는 방법에 대한 어떠한 제안도 환영합니다.

필요한 데이터를 저장해 두는 것이 좋습니다.Vuex스토어. 보다시피,srch-component결과를 제공하는 계산 속성이 있고 데이터를 자동으로 스토어에 디스패치하는 워처가 있습니다.그러면 이런 걸 쓸 수 있어요.app.$store컴포넌트를 조작하지 않고 데이터에 액세스 할 수 있습니다.

모듈(링크)을 사용하여 스토어를 보다 효율적으로 관리할 수도 있습니다.

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    topSrchResult: []
  },
  mutations: {
    updateTopSrchResult: (state, payload) => {
      state.topSrchResult = payload
    }
  },
  actions: {
    UPDATE_TOP_SRCH_RESULT: ({ commit }, data) => {
        commit('updateTopSrchResult', data)
    }  
  }
})



Vue.component('srch-component', {
    template: `
      <div>
        <div>Input: <input v-model="inputVal" type="text"/></div>
        <div>Search Results:</div>
        <ul>
          <li v-for="item in srchResult">{{item}}</li>
        </ul>
      </div>
    `,
    data() {
        return {
          inputVal: '',
          dummyData: [
            'Scrubs', 'Hannah Montana', '30 Rock', 'Wizards of Waverly Place',
            'How I Met Your Mother', 'Community', 'South Park', 'Parks and Recreation',
            'The Office', 'Brooklyn Nine-Nine', 'Simpsons', 'Fringe', 'Chuck'
          ]            
        }
    },
    watch: {
        srchResult() {
          const payload = this.srchResult.length <= 3  ? this.srchResult : this.srchResult.slice(0,3)
          this.$store.dispatch('UPDATE_TOP_SRCH_RESULT', payload) 
        }
    },
    computed: {
      srchResult() {
        return this.dummyData
          .filter(
            (item) => item.toLowerCase().includes(this.inputVal.toLowerCase())
        )
      }
    }
})

const app = new Vue({
  el: '#app',
  computed: {
      topSrchResult() {
        return this.$store.state.topSrchResult 
      }
  },
  store
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.1/vuex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<div id="app">
  <div>Top Results</div>
  <ul>
    <li v-for="item in topSrchResult">{{item}}</li>
  </ul>
  <srch-component></srch-component>
</div>

언급URL : https://stackoverflow.com/questions/46642723/vue-js-how-to-expose-component-data-properties-for-use-in-third-party-script