Vue.js의 구성 요소간에 데이터를 전달하는 방법
부모에서 소로 데이터를 전달하는 방법 【 → 】
· 하위 구성 요소
Child.vue
<template>
<!-- 親コンポーネントから値を受け取るための箱を用意する -->
<p>{{ value }}</p>
</template>
<script>
export default {
// 親コンポーネントから値を受け取る為に、propsを定義する(複数定義することも可)
props: ["value"],
}
</script>
· 부모 구성 요소
Parent.vue
<template>
<div>
<!-- 子コンポーネント側で定義したpropsのプロパティに、
データを入れて子コンポーネントへ渡す(動的に値を変更する場合は、「v-bind」を使う) -->
<Child value="親から子へ"></Child>
</div>
</template>
<script>
// 子コンポーネントをインポート
import Child from './components/Child'
export default {
/* template内でコンポーネントが利用できるように、
componentsプロパティに子コンポーネントをセット */
components: {
Child,
}
}
</script>
아이로부터 부모에게 데이터를 건네주는 방법 【 → 】
· 하위 구성 요소
Child.vue
<template>
<div>
<!-- 親コンポーネントから値を受け取るための箱を用意する -->
<p>{{ value }}</p>
<!-- ボタンを押した時に、親コンポーネント側でカスタムイベントを発火 -->
<button @click="change">値を変更</button>
</div>
</template>
<script>
export default {
// 親コンポーネントから値を受け取る為に、propsを定義する(複数定義することも可)
props: ["value"],
methods: {
change() {
// 親コンポーネントへ値を送る為のカスタムイベントを作成
this.$emit("receive", this.value = "子から親へ");
}
}
}
</script>
· 부모 구성 요소
Parent.vue
<template>
<div>
<!-- 子コンポーネントのボタンが押されると、
親コンポーネントのカスタムイベントが発火する -->
<Child value="親から子へ" @receive="changeValue"></Child>
</div>
</template>
<script>
// 子コンポーネントをインポート
import Child from './components/Child';
export default {
/* template内でコンポーネントが利用できるように、
componentsプロパティに子コンポーネントをセット */
components: {
Child,
},
methods: {
// 子コンポーネントで定義した$emitの第2引数を受け取る
changeValue(value) {
// 値を入れ替える
this.value = value;
}
}
}
</script>
HTML 코드를 아이 컴퍼넌트에 건네주는 방법 【 → 】
· 하위 구성 요소
Child.vue
<template>
<div>
<!-- 受け口としてslotタグを配置
親コンポーネント側のHTMLがslotタグと置き換わる -->
<slot></slot>
</div>
</template>
· 부모 구성 요소
Parent.vue
<template>
<div>
<!-- 送り口として、コンポーネントタグ内にHTMLを記述 -->
<Child>
<h1>HTMLを</h1>
<h2>子コンポーネントへ</h2>
</Child>
</div>
</template>
<script>
// 子コンポーネントをインポート
import Child from './components/Child';
export default {
/* template内でコンポーネントが利用できるように、
componentsプロパティに子コンポーネントをセット */
components: {
Child,
},
}
</script>
Reference
이 문제에 관하여(Vue.js의 구성 요소간에 데이터를 전달하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yuma11/items/536624c96afb9c0b239e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)