Vue.js의 구성 요소간에 데이터를 전달하는 방법

9435 단어 HTMLVue.jsvue-cli

부모에서 소로 데이터를 전달하는 방법 【 → 】



· 하위 구성 요소

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>

좋은 웹페이지 즐겨찾기