「VUE CLI」で作成したリンクボタンのリンクをページごとに設定したい

VUEを使用しSPAのページを作成しました。
よく使用するリンクボタンのコンポーネントを作成したのですが、ページごとにリンクの設定ができません。

作成コード

下記コードを作成しました。
しかしこれだと当然、他ページで使用する際に、同一のリンクにになってしまいます。

cvBtn
1<template>
2  <div class="cv-btn">
3      <p class="btn"><a class="btn-link" v-bind:href="url">{{msg}}</a></p>
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'cvBtn',
10  data () {
11    return {
12      url: 'ここで設定したリンクは反映される'
13    }
14  },
15  props: {
16    msg: String
17  }
18}
19</script>
20
21<style scoped lang="scss">
22</style>

##　試してみたこと

これだとURLすら反映されませんでした。

Blog
1<template>
2  <div class="cv-btn">
3      <p class="btn"><a class="btn-link" v-bind:href="url">{{msg}}</a></p>
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'cvBtn',
10  props: {
11    msg: String
12  }
13}
14</script>
15
16<style scoped lang="scss">
17</style>

cvBtn
1<template>
2  <div class="about">
3    <div class="l-content">
4      <pageTitle msg='BLOG.' />
5      <cvBtn msg='BLOG' />
6    </div>
7  </div>
8</template>
9
10
11<script>
12import pageTitle from '@/components/pageTitle.vue'
13import cvBtn from '@/components/cvBtn.vue'
14
15export default {
16  name: 'Blog',
17  components: {
18    pageTitle,
19    cvBtn,
20  },
21  data () {
22    return {
23      url: '反映されない……'
24    }
25  }
26}
27</script>
28

ご教授いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

子コンポーネントから親コンポーネントのデータ直接使用することは原則できません。
親から子にデータを受け渡したいときにはpropsを使用してください。

diff
1<template>
2  <div class="cv-btn">
3      <p class="btn"><a class="btn-link" v-bind:href="url">{{msg}}</a></p>
4  </div>
5</template>
6
7<script>
8export default {
9  name: 'cvBtn',
10  props: {
11    msg: String,
12++  url: String
13  }
14}
15</script>
16
17<style scoped lang="scss">
18</style>

diff
1<template>
2  <div class="about">
3    <div class="l-content">
4      <pageTitle msg='BLOG.' />
5--    <cvBtn msg="BLOG" />
6++    <cvBtn msg='BLOG' :url="url" />
7    </div>
8  </div>
9</template>
10
11
12<script>
13import pageTitle from '@/components/pageTitle.vue'
14import cvBtn from '@/components/cvBtn.vue'
15
16export default {
17  name: 'Blog',
18  components: {
19    pageTitle,
20    cvBtn,
21  },
22  data () {
23    return {
24      url: '反映されない……'
25    }
26  }
27}
28</script>