범위 외의 vue.js 컴포넌트 데이터를 변경하는 방법

범위 외의 vue.js 컴포넌트 데이터를 변경하는 방법

기본 내보내기 문 이외의 vue.js 데이터를 변경합니다.아래 예시를 들자면 어떻게 해야 할까요?

<template>
    <div>
        <h6 class="font-weight-normal mb-3">{{ name }}</h6>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: ""
        }
    }
}

let changeName = (name) => {
    //How do I change the name data property here
}
</script>

구성 요소를 변수/정수에 할당하는 경우 데이터 개체의 프록시 세터를 트리거하거나 구성 요소 수준 메서드를 사용하여 트리거할 수 있습니다.

const component = new Vue({
  data() {
    return {
      name: "Initial value."
    }
  },
  
  methods: {
    changeName(newName) {
      this.name = newName;
    }
  }
});

// Mount it to an element (for demo purposes)
component.$mount('#app');

document.getElementById('btn-setter').onclick = function() {
  component.name = 'Changed with SETTER';
};

document.getElementById('btn-method').onclick = function() {
  component.changeName('Changed with METHOD');
};

// Uncomment this to start exporting it.
// export default component;

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

<div id="app">
  <h6 class="font-weight-normal mb-3">{{ name }}</h6>
  
  <button id="btn-setter">Change with setter</button>
  <button id="btn-method">Change with method</button>
</div>

컴포넌트 외부 페이지(또는 내보내기 스테이트먼트)에 원하는 함수를 쓸 수 있지만 이 함수를 호출하려면methods컴포넌트의 섹션 또는 어딘가에 있습니다.디폴트값을 작성하는 함수에 사용합니다.외부에서 Import하지 않고 함수를 작성하기만 하면 됩니다.initVal = () => someVal그리고 나서data또는computed또는 어딘가에서 참조처initVal(이것이 아닙니다).

언급URL : https://stackoverflow.com/questions/57448926/how-to-change-vue-js-components-data-outside-scope