Vue.js의 다른 구성 요소에서 호출 방법

Vue.js의 다른 구성 요소에서 호출 방법

이 시나리오의 다른 구성 요소에서 메소드를 호출하려면 어떻게 해야 하는가?컴포넌트 1에서 버튼 클릭 후 API에서 추가 데이터 피스를 컴포넌트 2로 로드하고 싶다.

고마워요.

분리 파일의 두 가지 구성 요소는 다음과 같다.

콤프턴을 치다부에를 하다

<template>
    <div>
        <a href v-on:click="buttonClicked">Change Name</a>
    </div>
</template>

<script>
    export default {
        name: 'compbutton',
        methods: {
            buttonClicked: function () {
                //call changeName here
            }
        }
    }
</script>

이름을 붙이다부에를 하다

<template>
    <div>{{name}}</div>
</template>

<script>
    export default {
        name: 'compname',
        data: function () {
            return {
                name: 'John'
            }
        },
        methods: {
            changeName: function () {
                this.name = 'Ben'
            }
        }
    }
</script>

구성 요소의 이름을 지정한 다음 다른 구성 요소에서 메소드를 $ref할 수 있다.

콤프턴을 치다부에를 하다

<template>
  <div>
    <a href v-on:click="buttonClicked">Change Name</a>
  </div>
</template>

<script>
export default {
  name: "compbutton",
  methods: {
    buttonClicked: function() {
      //call changeName here
      this.$root.$refs.compname_component.changeName();
    }
  }
};
</script>

이름을 붙이다부에를 하다

<template>
  <div>{{name}}</div>
</template>

<script>
export default {
  name: "compname",
  data: function() {
    return {
      name: "John"
    };
  },
  methods: {
    changeName: function() {
      this.name = "Ben";
    }
  },
  created() {
    // set componenent name
    this.$root.$refs.compname_component = this;
  }
};
</script>

대안적 답변: 자녀가 부모 구성요소에서 소품으로 호출할 기능을 전달할 수 있다.예시 사용:

콤프턴을 치다부에를 하다

<template>
    <div>
        <a href v-on:click="buttonClicked">Change Name</a>
    </div>
</template>

<script>
    export default {
        name: 'compbutton',
        props: {
            clickHandler: {
                type: Function,
                default() {
                    return function () {};
                }
            }
        },
        methods: {
            buttonClicked: function () {
                this.clickHandler(); // invoke func passed via prop
            }
        }
    }
</script>

이름을 붙이다부에를 하다

<template>
    <div>{{name}}</div>
    <compbutton :click-handler="changeName"></compbutton>
</template>

<script>
    export default {
        name: 'compname',
        data: function () {
            return {
                name: 'John'
            }
        },
        methods: {
            changeName: function () {
                this.name = 'Ben'
            }
        }
    }
</script>

참고로, 예에서는 'computbutton' 구성요소를 렌더링할 위치에 나타나지 않으므로, compname의 템플리트에는 'computbutton' 구성요소가 나타나지 않는다.부에, 그것 또한 추가되었다.

서비스를 중개인으로 이용할 수 있다.보통 데이터를 공유하기 위해 서비스를 이용하지만, 자바스크립트 기능에서도 데이터처럼 취급할 수 있다.

서비스 코드가 사소한 경우, 기능에 스텁만 추가하십시오.changeName

changeName.봉사의js

export default {
  changeName: function () {}
}

구성 요소에 서비스를 주입하려면 프로젝트에 vue-injector를 포함하십시오.

npm install --save vue-inject
or
yarn add vue-inject

서비스 목록을 가지고 있고

인젝터-register.js

import injector from 'vue-inject';

import ChangeNameService from '@/services/changeName.service'

injector.service('changeNameService', function () { 
  return ChangeNameService 
});

그 때.main.js(또는 메인 파일은 Index.js라고 불릴 수 있으며, 인젝터를 초기화하기 위한 섹션이다.

import injector from 'vue-inject';
require('@/services/injector-register');
Vue.use(injector);

마지막으로, 구성 요소에 서비스를 넣는다.dependencies정열은, 그리고 서비스를 사용한다.

compname.vue

<script>
  export default {
    dependencies : ['changeNameService'],
    created() {
      // Set the service stub function to point to this one
      this.changeNameService.changeName = this.changeName;
    },
    ...

compbutton.vue

<script>
  export default {
    dependencies : ['changeNameService'],
    name: 'compbutton',
    methods: {
       buttonClicked: function () {
         this.changeNameService.changeName();
       }
    }
    ...

를 넣으세요#려면 버튼을 href 페이지 reloads를 막는 것이다.

<a href="#" v-on:click="buttonClicked">Change Name</a>

CodeSandbox 안에 있는 모든 것을 참조하십시오.

언급URL:https://stackoverflow.com/questions/48107693/call-method-from-another-component-in-vue-js