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

Question

コンポーネントを登録して、テンプレート内でv-bindを指定してもうまく表示されません。
初歩的な部分だと思いますが、ご教授願います。

<div id="app">
  <component-txt title="タイトル1" content="内容1"></component-txt>
</div>

Vue.component('component-txt', {
  template:`
   <div>
    <p>{{ title }}</p>
    <p>{{ content }}</p>
     <a :href="url">リンク</a>
   </div>
  `,
  props: ['title','content']
})



new Vue({
  el: '#app',
  data() {
    return {
      url: "https://google.com"
    }
  }
})

実際の表示画面では以下の状態となります。

タイトル1
内容1
リンク（ここのリンクがついてくれない）

やりたいこと：
コンポーネントで再利用しながらpropsなどでURL部分をそれぞれ違うリンク先にしたい。

宜しくお願い致します。

Answer 1

コンポーネント内ではコンポーネントにあるものしか原則見れませんよ。
コンポーネント内にurlがないからです。propsに指定して渡せばいいかと

<div id="app">
  <component-txt v-bind:url="url" title="タイトル1" content="内容1"></component-txt>
</div>

Vue.component('component-txt', {
  template:`
   <div>
    <p>{{ title }}</p>
    <p>{{ content }}</p>
     <a :href="url">リンク</a>
   </div>
  `,
  props: ['title','content','url']
})



new Vue({
  el: '#app',
  data() {
    return {
      url: "https://google.com"
    }
  }
})

Comments

[rinrin1137]

できました！
html側でもv-bindとして記述が必要なのですね。
ありがとうございました。

[rinrin1137]

ちなみにdata内でURLを指定しないで、各リンクをhtml側で変えたい場合はどのようにすればよろしいでしょうか？