Vue.jsのコンポーネントの扱いについて

Question

Vue.jsを学習しているのですが、初めたばかりで調べてもわからない部分があったのでご教授願います。

コンポーネントの再利用ですが、コンテンツ内容という部分が現状表示できておりません。
何か記述の仕方が間違っているのでしょうか？

宜しくお願い致します。

  <div id="text">
    <my-component title-text="タイトル" content-message="コンテンツ内容"></my-component>
  </div>

<script>

  Vue.component('my-component', {
    template: `
              <div>
                <h2>{{ titleText }}</h1>
                <p>{{ contentMessage }}</p>
              </div>`,
    props: ['titleText, contentMessage']
  });

  new Vue({
    el: "#text",
  });

</script>

Answer 1

h2が閉じられてない

<h2>{{ titleText }}</h1>

propが文字列になっている

props: ['titleText, contentMessage']
props: ['titleText', 'contentMessage']

で直りそう。

Comments

[rinrin1137]

<div id="text">
<text-component title-text="タイトル" content-message="コンテンツ内容"></text-component>
</div>

<script>
Vue.component('my-component', {
template: `<div>
<h2>{{ titleText }}</h2>
<p>{{ contentMessage }}</p>
</div>`,
props: ['titleText, contentMessage'],
props: ['titleText, contentMessage']
});

new Vue({
el: "#text",
});
</script>

上記のように編集しても表示できませんでした。
まだ何か間違っているのでしょうか。
引き続きご回答いただけますと幸いです。

[sousuke]

propsがかわってないんじゃないかな。文字列で渡すのは名前の配列。下に直してねって意味で書いた。
<div id="text">
<my-component title-text="タイトル" content-message="コンテンツ内容"></my-component>
</div>

<script>
Vue.component('my-component', {
template: `<div>
<h2>{{ titleText }}</h2>
<p>{{ contentMessage }}</p>
</div>`,
props: ['titleText', 'contentMessage']
});

new Vue({
el: "#text",
});
</script>
あとなんでかmy-componentがtext-componentになってるよ

[rinrin1137]

間違っている箇所があったので修正したら無事に表示できました！ありがとうございました^^