구성 요소 외부에서 Vue.js 구성 요소 메서드를 호출하십시오.
예를 들어, 하위 구성 요소를 포함하는 기본 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의 지시를 사용하기로 선택했다.이것은 부모로부터 직접 접근을 위해 구성요소를 참조할 수 있게 한다.
예시
부모 인스턴스에 컴퍼멘트가 등록되어 있음:
var vm = new Vue({
el: '#app',
components: { 'my-component': myComponent }
});
참조를 사용하여 구성 요소를 템플릿/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/의 예제를 보려면 이 fiddle을 참조하십시오.
(예: Vue 1 사용: https://jsfiddle.net/6v7y6msr/)
부모 구성 요소에서 $ref를 통해 호출할 수 있는 하위 구성 요소에 대한 참조를 설정할 수 있다.
하위 구성 요소에 참조 추가:
<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>Vue2의 경우 다음과 같이 적용된다.
var bus = new Vue()
// 성분 A의 방법으로
bus.$emit('id-selected', 1)
// 구성 요소 B가 만든 후크에서
bus.$on('id-selected', function (id) {
// ...
})
Vue 문서를 보려면 여기를 참조하십시오.그리고 여기 이 이벤트 버스를 정확히 설정하는 방법에 대한 더 자세한 설명이 있다.
속성, 이벤트 및/또는 중앙 집중식 상태 관리를 사용해야 하는 시기에 대한 자세한 내용은 이 문서를 참조하십시오.
Vue 3에 대한 Thomas의 아래 의견을 참조하십시오.
Vue 이벤트 시스템 사용 가능
vm.$broadcast('event-name', args)
그리고
vm.$on('event-name', function())
여기 fiddle: http://jsfiddle.net/hfalucas/wc1gg5v4/59/
수용된 답변의 약간 다른 (시뮬러) 버전:
상위 인스턴스에 등록된 구성 요소:
export default {
components: { 'my-component': myComponent }
}
참조를 사용하여 구성 요소를 템플릿/html로 렌더링:
<my-component ref="foo"></my-component>
구성 요소 메서드에 액세스:
<script>
this.$refs.foo.doSomething();
</script>
Say you have a .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');
}
}
여기 간단한 것이 있다.
this.$children[indexOfComponent].childsMethodName();
Vue 3 사용:
const app = createApp({})
// register an options object
app.component('my-component', {
/* ... */
})
....
// retrieve a registered component
const MyComponent = app.component('my-component')
MyComponent.methods.greet();
https://v3.vuejs.org/api/application-api.html#component
나는 그것이 옳은 방법인지 확실하지 않지만 이것은 나에게 효과가 있다.
먼저 구성 요소를 호출할 메서드가 포함된 구성 요소를 가져오십시오.
import myComponent from './MyComponent'
그런 다음 MyCompenent의 모든 방법을 호출하십시오.
myComponent.methods.doSomething()
다음과 같은 구성 요소에 기능을 선언하십시오.
export default {
mounted () {
this.$root.$on('component1', () => {
// do your logic here :D
});
}
};
이런 페이지에서 호출하십시오.
this.$root.$emit("component1");
때때로 당신은 이러한 것들을 당신의 구성 요소 안에 포함시키고 싶어한다.DOM 상태(Vue 구성 요소가 인스턴스화될 때 수신 중인 요소가 DOM에 존재해야 함)에 따라 Vue 구성 요소 내에서 구성 요소 외부의 요소에 대한 이벤트를 청취할 수 있다.구성 요소 외부에 요소가 있다고 가정해 봅시다. 사용자가 해당 요소를 클릭하면 구성 요소가 응답하도록 하십시오.
html에서 사용하는 기능:
<a href="#" id="outsideLink">Launch the component</a>
...
<my-component></my-component>
Vue 구성 요소:
methods() {
doSomething() {
// do something
}
},
created() {
document.getElementById('outsideLink').addEventListener('click', evt =>
{
this.doSomething();
});
}
나는 아주 간단한 용액을 사용해 왔다.내가 선택한 Vue Component에 메소드를 호출하는 HTML 요소를 바닐라 JS를 사용하여 포함시키고 클릭을 트리거한다!
부에 컴포넌트에 다음과 같은 내용을 포함시켰다.
<span data-id="btnReload" @click="fetchTaskList()"><i class="fa fa-refresh"></i></span>
바닐라 JS 사용:
const btnReload = document.querySelector('[data-id="btnReload"]');
btnReload.click();
'Programing' 카테고리의 다른 글
| [vue 경고]:요소를 찾을 수 없음 (0) | 2022.03.05 |
|---|---|
| 'Unchecked runtime.lastError:응답이 수신되기 전에 메시지 포트가 닫힘' 크롬 문제? (0) | 2022.03.05 |
| vue-cli 프로젝트에서 포트 번호를 변경하는 방법 (0) | 2022.03.05 |
| Vue 프로젝트의 보기와 구성 요소 폴더 간의 차이점은? (0) | 2022.03.05 |
| 각각은 JavaScript 배열의 함수 오류가 아님 (0) | 2022.03.05 |