vue.jsで親から子へdataを渡したい

Question

下記の親コンポーネントから

<template>
  <div id="oya">
    <div>
      <ul>
        <li v-for="(list, index) in Models" :key="index" v-on:click="chngeSvg(list.model)">{{ list.model }}</li>
      </ul>
    </div>
    <childBlock></childBlock>
  </div>
</template>

<script>
import childBlock from '@/components/childBlock'

export default {
  name: 'mainBlock',
  components: {
    childBlock
  },
  data () {
    return {
      Models: [
        { model : 'line' },
        { model : 'circle' }
      ]
    }
  },
  methods : {
    chngeModel: function (target) {
      console.log(target);
    }
  }
}
</script>

下記の子コンポーネントへデータを渡したいです

<template>
  <div id="childBlock">
    <div v-if="showFlag === 'line'">
      <Line></Line>
    </div>
    <div v-else-if="showFlag === 'circle'">
      <Circle></Circle>
    </div>
  </div>
</template>

<script>
import Line from '@/components/Line'
import Circle from '@/components/Circle'


export default {
  name: 'childBlock',
  components: {
    Line,
    Circle
  },
  data () {
    return {
      showFlag: 'circle'
    }
  }
}
</script>

親コンポーネントの「console.log(target);」はクリックした引数を拾っています
[childBlock]のshowFlagにどうやったらchngeModelのtargetを渡せるでしょうか

Answer 1

質問者様のコードベースで簡単に親から子へ引数を継承する方法をご紹介します！

まず親側の設定はchildBlockコンポーネントに対してv-bindを使用して引数を子へ継承できるように記述します！

<template>
  <div id="oya">
    <div>
      <ul>
        <li v-for="(list, index) in Models" :key="index" v-on:click="chngeSvg(list.model)">{{ list.model }}</li>
      </ul>
    </div>
    <childBlock v-bind:hoge="hoge"></childBlock>
  </div>
</template>

<script>
import childBlock from '@/components/childBlock'

export default {
  name: 'mainBlock',
  components: {
    childBlock
  },
  data () {
    return {
      hoge: '親から子へ渡すよー',
      Models: [
        { model : 'line' },
        { model : 'circle' }
      ]
    }
  },
  methods : {
    chngeModel: function (target) {
      console.log(target);
    }
  }
}
</script>

子側のコンポーネントにはprops: ['hoge']をexport default内に記述することで親から引数を継承することができます。

<template>
  <div id="childBlock">
    <p>{{ hoge }}</p>
    <div v-if="showFlag === 'line'">
      <Line></Line>
    </div>
    <div v-else-if="showFlag === 'circle'">
      <Circle></Circle>
    </div>
  </div>
</template>

<script>
import Line from '@/components/Line'
import Circle from '@/components/Circle'


export default {
  name: 'childBlock',
  props: ['hoge'],
  components: {
    Line,
    Circle
  },
  data () {
    return {
      showFlag: 'circle'
    }
  }
}
</script>

Answer 2

厳しいことを言いますが、こういった基本的な使い方は公式のドキュメントを一読すればすぐにわかることです。
Vue.jsは特にドキュメントが充実しており、日本語なので全部読むのも苦ではないはずです。

公式ドキュメント https://jp.vuejs.org/v2/guide/index.html

Comments

[退会済みユーザー]

> 公式のドキュメントを一読すればすぐにわかることです。
それを言っちゃどの言語もお終いでしょうよ。
Vue.jsは公式ドキュメントを見てもわからないことはあります。
親切に教えてあげましょうよ。そのためのteratailではないでしょうか。

[spookybird]

あまりにも基本的すぎる話だったので…
一通りドキュメントに目を通すだけでわかるレベルのことなら自ら学び取るくらいできないと、自分の力になっていかないと思うんです。
回答自体は別の方が書かれていたので、わたしはあえてこういった指摘をしました。
回答が他に付いていなければ、私だって鬼じゃないのでちゃんと回答も添えます。

[退会済みユーザー]

公式ドキュメントを見ても分からない人はたくさんいます。
ドキュメントは基本的なことしか書いてないので自分がほしい情報が載っていないことが多いです。
今回の質問者様のコードとドキュメントのコードが違うのも一理あります。
https://jp.vuejs.org/v2/api/#props

Answer 3

コンポーネントのプロパティはバインドできるので、それを利用するとよいと思います。

たとえば、以下のコードでは、はじめ子コンポーネントでは「ほげ」が表示されていますが、
親コンポーネントのボタンをクリックすると、「ふが」に表示が変わります。

<div id="app"><oya /></div>
<script>
  const childBlock = {
    props:['target'],
    template:'<div>{{target}}</div>'
  };
  const oya = {
    data:()=>({ oya_target: 'ほげ' }),
    components:{childBlock: childBlock},
    template:`
      <div>
        <button @click="oya_target='ふが'">ボタン</button>
        <childBlock :target="oya_target"/>
      </div>
      `
  };
  new Vue({
    el: '#app',
    components:{oya: oya}
  });
</script>