[Vue] 7. Vue 컴포넌트 개발_고급편 - 3) 부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기
부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기
// DataBindingExample.vue
<template>
<div>
<button type="button" @click="callChildFunc">부모에 있는 클릭</button>
<ChildComponent ref="child_component" />
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
components: { ChildComponent },
data() {
return {};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
callChildFunc() {
this.$refs.child_component.$refs.child_btn.click();
},
},
};
</script>
<style scoped></style>
//ChildComponent.vue
<template>
<div>
<button type="button" @click="childFunc" ref="child_btn">
자식에 있는 클릭
</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
childFunc() {
alert("부모 컴포넌트에서 직접 발생시킨 이벤트");
},
},
};
</script>
<style scoped></style>
// DataBindingExample.vue
<template>
<div>
<button type="button" @click="callChildFunc">부모에 있는 클릭</button>
<ChildComponent ref="child_component" />
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue";
export default {
components: { ChildComponent },
data() {
return {};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
callChildFunc() {
this.$refs.child_component.$refs.child_btn.click();
},
},
};
</script>
<style scoped></style>
//ChildComponent.vue
<template>
<div>
<button type="button" @click="childFunc" ref="child_btn">
자식에 있는 클릭
</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
childFunc() {
alert("부모 컴포넌트에서 직접 발생시킨 이벤트");
},
},
};
</script>
<style scoped></style>
Author And Source
이 문제에 관하여([Vue] 7. Vue 컴포넌트 개발_고급편 - 3) 부모 컴포넌트에서 자식 컴포넌트의 이벤트 발생시키기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-3-부모-컴포넌트에서-자식-컴포넌트의-이벤트-발생시키기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)