Vue: Vue 인스턴스에서 구성 요소 데이터 업데이트

Vue: Vue 인스턴스에서 구성 요소 데이터 업데이트

내 Vue 인스턴스에서 구성 요소의 데이터를 업데이트하고 싶다.그 반대인 방법을 많이 찾았지만 아무것도 없었다.

내가 가지고 있다고 말해라:

Vue.component('component', {
props: {
    prop: {
        default: null
    }
},
template: '#template',
data: function () {
    return {
        open: false
    };
}
});

이제 나는 설정하기를 원한다.open로true내 Vue 예에서:

var root = new Vue({
    el: '#root',
    data: {},
    methods: { updateComponentData: function() {//set open to true} } });

Child Component Ref를 사용하여 이 작업을 수행할 수 있어야 한다.

<script type="text/x-template" id="template" ref="component">
    <div>Hello, {{ name }}!</div>
</script>

var root = new Vue({
  el: '#root',
  data: {},
  methods: { 
    updateComponentData: function() {
      this.$refs.component.open = true
    } 
  } 
});

---

작업 예제

const Child = Vue.component('child', {
  template: `
    <div>
      <h2>Component1</h2>
      <div>Hello, {{ title }}! <strong>{{ open }}<strong></div>
    </div>
  `,
  data() {
    return {
      title: 'component',
      open: false
    }
  }
});

var root = new Vue({
  el: '#app',
  components: {
    Child
  },
  methods: { 
    updateComponentData: function() {
      //console.log('updateComponentData', this.$refs)
      this.$refs.component1.open = true
    } 
  } 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <h2>Parent</h2>
  <button v-on:click="updateComponentData">Click me true</button>
  <child ref="component1"></child>
</div>

방금 네 코드를 가지고 놀았는데 다음 코드가 완벽히 작동하니 그렇게 해봐.나는 Vue 'ref'를 사용한 적이 있다.추가하다ref당신의 구성요소의 속성에 그리고 당신은 부모로부터 그 특정한 구성요소 데이터에 접근할 수 있다.

Vue.component('component', {
    props: {
        prop: {
            default: null
        }
    },
    template: '#template',
    data: () => ({
        open: false
    })
});
var root = new Vue({
    el: '#root',
    data: () => ({}),
    methods: {
        updateComponentData: function() {
			      this.$refs.myComponent.open = true
        }
    },
});

<script src="https://unpkg.com/vue"></script>
<div id="root">
	  <button @click="updateComponentData">Change</button>
    <hr>
    <component ref='myComponent'></component>
</div>
<script type="text/x-template" id="template" ref="component">
    <div>Open: {{ open }}!</div>
</script>

참조URL: https://stackoverflow.com/questions/47281746/vue-update-component-data-from-vue-instance