[Vue] 7. Vue構成部品の開発詳細編-5)親構成部品の中性子構成部品のデータの変更
親構成部品の中性子構成部品のデータの変更
親構成部品から子構成部品のデータを直接変更できます.// 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();
// this.$refs.child_component.childFunc();
this.$refs.child_component.msg = "부모 컴포넌트에서 변경한 메시지";
},
},
};
</script>
<style scoped></style>
// ChildComponent.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
msg: "자식에 있던 메시지",
};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {},
};
</script>
<style scoped></style>
Reference
この問題について([Vue] 7. Vue構成部品の開発詳細編-5)親構成部品の中性子構成部品のデータの変更), 我々は、より多くの情報をここで見つけました
https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-5-부모-컴포넌트에서-자식-컴포넌트의-데이터-변경하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
// 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();
// this.$refs.child_component.childFunc();
this.$refs.child_component.msg = "부모 컴포넌트에서 변경한 메시지";
},
},
};
</script>
<style scoped></style>
// ChildComponent.vue
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
msg: "자식에 있던 메시지",
};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {},
};
</script>
<style scoped></style>
Reference
この問題について([Vue] 7. Vue構成部品の開発詳細編-5)親構成部品の中性子構成部品のデータの変更), 我々は、より多くの情報をここで見つけました https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-5-부모-컴포넌트에서-자식-컴포넌트의-데이터-변경하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol