[Vue] 親から子コンポーネントにデータを渡したい

Question

いつもお世話になっております。

Vueで親から子コンポーネントにデータを渡したいのですが、
いまいちうまくいきません。

いろんなサイトを参考にしながら修正を繰り返しているのですが、
一体どこがいけないのでしょうか。。？

# html

<my-modal modalName="このデータを渡したい"></my-modal>

# main.js

import Vue from 'vue/dist/vue.min';
import MyModal from './components/model';

new Vue({

  components: { MyModal },

}).$mount('#page');

#componensts/modal.js

import Vue from 'vue/dist/vue.min';

export default {

  template: `
    <div>

    <h1>{{modalName}}</h1>

    </div>
	`,

  data() {
    return {

      modalTest: 'modal-test',

    };
  },

  // このデータを受け取りたい
  props: ['modalName']

};

Answer 1

ぱっと見キャメルケースケバブケースかな？違ったらすまそm(__)m
https://jp.vuejs.org/v2/guide/components-props.html

<my-modal modal-name="このデータを渡したい"></my-modal>

htmlの属性名は大文字はすべて小文字扱いですので扱いが若干ややこしくなります。

Comments

[matsuo_basho]

ズバリ的中でした！
本当にありがとうございます！m(__)m

Answer 2

<my-modal :modalName="このデータを渡したい"></my-modal>

如此尝试看看