자식 구성 요소가있는 기본 Vue 인스턴스가 있다고 가정 해 봅시다. Vue 인스턴스 외부에서 이러한 구성 요소 중 하나에 속하는 메소드를 호출하는 방법이 있습니까?
예를 들면 다음과 같습니다.
var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '#my-template',
data: function() {
return {
count: 1,
};
},
methods: {
increaseCount: function() {
this.count++;
}
}
},
}
});
$('#external-button').click(function()
{
vm['my-component'].increaseCount(); // This doesn't work
});<script src="http://vuejs.org/js/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
<my-component></my-component>
<br>
<button id="external-button">External Button</button>
</div>
<template id="my-template">
<div style="border: 1px solid; padding: 5px;">
<p>A counter: {{ count }}</p>
<button @click="increaseCount">Internal Button</button>
</div>
</template>내부 버튼을 클릭하면 increaseCount()메서드가 클릭 이벤트에 바인딩되어 호출됩니다. jQuery로 듣고있는 클릭 이벤트 인 외부 버튼에 이벤트를 바인딩 할 수있는 방법이 없으므로을 호출하는 다른 방법이 필요합니다 increaseCount.
편집하다
이것이 작동하는 것 같습니다 :
vm.$children[0].increaseCount();그러나 자식 배열의 색인으로 구성 요소를 참조하고 있기 때문에 이것은 좋은 해결책이 아니며 많은 구성 요소를 사용하면 일정하게 유지되지 않고 코드를 읽을 수 없습니다.
답변
결국 나는 Vue의 ref지시문 을 사용하기로 결정했습니다 . 이를 통해 직접 액세스 할 수 있도록 부모에서 구성 요소를 참조 할 수 있습니다.
예 :
부모 인스턴스에 compenent를 등록하십시오.
var vm = new Vue({
el: '#app',
components: { 'my-component': myComponent }
});컴포넌트를 참조로 template / html로 렌더링하십시오.
<my-component ref="foo"></my-component>이제 다른 곳에서 외부 적으로 구성 요소에 액세스 할 수 있습니다
<script>
vm.$refs.foo.doSomething(); //assuming my component has a doSomething() method
</script>예를 들어이 바이올린을 참조하십시오 : https://jsfiddle.net/xmqgnbu3/1/
(Vue 1 : https://jsfiddle.net/6v7y6msr/ 사용하는 예 )
답변
Vue2부터 적용됩니다 :
var bus = new Vue()// 컴포넌트 A의 메소드에서
bus.$emit('id-selected', 1)// 컴포넌트 B의 후크 생성
bus.$on('id-selected', function (id) {
// ...
})Vue 문서는 여기 를 참조 하십시오 . 이 이벤트 버스를 정확하게 설정하는 방법에 대한 자세한 내용은 다음 과 같습니다 .
속성, 이벤트 및 / 또는 중앙 집중식 상태 관리 사용시기에 대한 자세한 내용을 보려면 이 문서를 참조 하십시오 .
답변
Vue 이벤트 시스템을 사용할 수 있습니다
vm.$broadcast('event-name', args)과
vm.$on('event-name', function())여기 바이올린이 있습니다 :
http://jsfiddle.net/hfalucas/wc1gg5v4/59/
답변
허용되는 답변의 약간 다른 (더 간단한) 버전 :
상위 인스턴스에 컴포넌트를 등록하십시오.
export default {
components: { 'my-component': myComponent }
}컴포넌트를 참조로 template / html로 렌더링하십시오.
<my-component ref="foo"></my-component>컴포넌트 메소드에 액세스하십시오.
<script>
this.$refs.foo.doSomething();
</script>답변
자식 구성 요소에 대한 참조를 설정하면 부모에서 $ refs를 통해 호출 할 수 있습니다.
하위 구성 요소에 참조 추가 :
<my-component ref="childref"></my-component>부모님에게 클릭 이벤트 추가 :
<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>var vm = new Vue({
el: '#app',
components: {
'my-component': {
template: '#my-template',
data: function() {
return {
count: 1,
};
},
methods: {
increaseCount: function() {
this.count++;
}
}
},
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-component ref="childref"></my-component>
<button id="external-button" @click="$refs.childref.increaseCount()">External Button</button>
</div>
<template id="my-template">
<div style="border: 1px solid; padding: 2px;" ref="childref">
<p>A counter: {{ count }}</p>
<button @click="increaseCount">Internal Button</button>
</div>
</template>답변
child_method()하위 구성 요소에 있다고 가정 해보십시오 .
export default {
methods: {
child_method () {
console.log('I got clicked')
}
}
}이제 child_method상위 컴포넌트에서 실행하려고합니다 .
<template>
<div>
<button @click="exec">Execute child component</button>
<child-cmp ref="child"></child_cmp> <!-- note the ref="child" here -->
</div>
</template>
export default {
methods: {
exec () { //accessing the child component instance through $refs
this.$refs.child.child_method() //execute the method belongs to the child component
}
}
}하위 구성 요소에서 상위 구성 요소 메소드를 실행하려면 다음을 수행하십시오.
this.$parent.name_of_method()
참고 : 이와 같이 자식 및 부모 구성 요소에 액세스하지 않는 것이 좋습니다.
모범 사례로 부모-자식 의사 소통을 위해 소품 및 이벤트를 사용하십시오.
구성 요소 간 통신을 원할 경우 반드시 vuex 또는 이벤트 버스를 사용하십시오
이 매우 유용한 기사를 읽으십시오
답변
다른 구성 요소에서 구성 요소의 메소드에 액세스하는 간단한 방법입니다.
// This is external shared (reusable) component, so you can call its methods from other components
export default {
name: 'SharedBase',
methods: {
fetchLocalData: function(module, page){
// .....fetches some data
return { jsonData }
}
}
}
// This is your component where you can call SharedBased component's method(s)
import SharedBase from '[your path to component]';
var sections = [];
export default {
name: 'History',
created: function(){
this.sections = SharedBase.methods['fetchLocalData']('intro', 'history');
}
}