vuejs의 데이터로 앱을 초기화하는 방법

vuejs의 데이터로 앱을 초기화하는 방법

Foo라는 단일 파일 구성 요소를 사용하고 있습니다.

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
export default {
  data() {
   return { x: 'hello x' };
  },
}
</script>

그리고 다음과 같이 앱을 초기화합니다.

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({             
  'el': node,                     
  data: {y},
  render: h => h(Foo)             
});                               

이는 'y'가 실제로는 단순한 문자열이 아닌 오브젝트라는 점에서 지나치게 단순화된 것입니다.그게 차이를 만든다면.

아이 컴포넌트의 소품 등을 건네주는 방법은 알고 있습니다만, 메인 구성 데이터를 최상위 Vue 앱에 넣는 데 어려움을 겪고 있습니다.

Foo.vue:

더하다props:['y']

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
  export default {
  props:['y']
    data() {
      return {
        x: 'hello x'
      };
    },
  }
</script>

main.discloss.main.discloss.

더하다template:'<Foo :y="y"'/>vue 인스턴스와node유효한 html 요소여야 합니다.

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({
  'el': node,
  data: {
    y: "some content"
  },
  template: "<Foo :y='y'/>"
});

내가 한 방법은 이렇다.

인Foo.vue더하다props:

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
export default {
  data() {return { x: 'hello x' };},
  props: [ 'y' ],
}
</script>

그런 다음 앱을 만드는 주요 js:

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({             
  'el': node,
  render: h => h(Foo, {props: {y})
});                               

이렇게 하면 y는 소품으로 통과되지만, 사용에는 의존하지 않습니다.template여기에는 헤비어 컴파일러에 포함된 Vue 빌드가 필요합니다.

이 방법의 장점은 CMS가 각각 Vue 앱이어야 하는 페이지 청크를 뱉어내고, 각 앱의 구성을 포함할 수 있으며, 콘텐츠만 다른 모든 Vue 앱을 만들 수 있다는 것입니다.

단일 파일 컴포넌트에 대한 문서화의 초점은 단일 페이지 앱인 것처럼 보이지만, 제가 필요로 하는 것은 그게 아닙니다.

결의안

최상위 Vue 앱의 데이터를 사용해야 하는 경우 다음을 사용하여 만들 수 있습니다.$parent또는$root그럼, 을 사용할 수 있습니다.$data해당 Vue 인스턴스의 데이터에 액세스합니다.다음은 Vue 인스턴스의 문서입니다.

와 함께$parent한 구성 요소의 상위 Vue 인스턴스를 가져옵니다.

this.$parent.$data.y

와 함께$root현재 컴포넌트 트리의 루트 Vue 인스턴스를 가져옵니다.

this.$root.$data.y

Foo.vue는 다음과 같습니다.

<template>
  <div>This is the app. X is {{ x }}, y is {{ y }}</div>
</template>

<script>
export default {
  data: function() {
    return { x: "x" };
  },
  computed: {
    y: function() {
      return this.$parent.$data.y;
    }
  }
};
</script>

라이브 코드는 이쪽에서 보실 수 있습니다.

더

하지만 권장되는 방법은 아닙니다.하위 구성 요소에 데이터를 전달하려면props소품이 마음에 들지 않으면 Vuex를 사용하여 글로벌 데이터 스토어를 작성하여 최상위 옵션을 저장할 수 있습니다.

언급URL : https://stackoverflow.com/questions/53788252/how-to-initialise-an-app-with-data-in-vuejs