루트 Vue 클래스 구성 요소에 데이터 전달

루트 Vue 클래스 구성 요소에 데이터 전달

다음과 같이 Vue 클래스 컴포넌트를 사용하여 정의된 컴포넌트가 있습니다.

@Component
export default class MyComponent extends Vue {
  value = 0;
}

이 컴포넌트를 루트 컴포넌트로 인스턴스화하여 매번 다른 데이터가 전달되도록 반복해야 합니다.예를 들어, 다음과 같이 시도했습니다.

const vm = new Vue({
  el: myElement,
  render: (h) => h(MyComponent),
  data: {value: 1},
});

하지만 내가 봤을 때this.value컴포넌트에서는 1이 아닌 0으로 설정됩니다.호출 시 전달된 값으로 컴포넌트를 인스턴스화하도록 지정할 수 있습니까?new Vue?

루트 컴포넌트가 렌더링 중이기 때문에 시도한 것이 작동하지 않습니다.MyComponent루트 구성요소에 정의된 데이터는 하위 구성요소의 데이터와 별개입니다.두 개의 서로 다른 구성 요소이기 때문에 덮어쓸 수 없습니다.

Vue 클래스의 컴포넌트는 잘 모르지만, 여기 바닐라 솔루션이 있습니다.그MyComponent클래스가 확장되다Vue를 인스턴스화할 수 있습니다.MyComponent루트 구성 요소로 직접 지정되며 인스턴스화 중에 제공하는 모든 추가 옵션이 기본 옵션에 혼합됩니다.

대신 다음과 같은 작업만 수행하면 됩니다.

const vm = new MyComponent({
  el: myElement,
  data: { value: 1 },
})

렌더 함수는 이미 정의되어 있으므로 지정할 필요가 없습니다.MyComponent.

다음은 실행 가능한 토막입니다.

const MyComponent = Vue.extend({
  template: '<div>{{ value }}</div>',
  data() {
    return {
      value: 'base'
    }
  }
})

new MyComponent({
  el: '#app',
  data: {
    value: 'extended'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

언급URL : https://stackoverflow.com/questions/63975286/passing-data-to-root-vue-class-component