Vue components で値が渡せない

vueのpropsを使用したコードを書いていますが、受け渡しがおかしいのかうまくいきません。
値を指定しているはずなのにnot defined が表示されてしまいます。

発生している問題・エラーメッセージ

app.js?id=63693c9879da2cb5ccb5:116707 [Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

該当のソースコード

App.vue

<template>
  <div class="source">
    <EditFormview msg="文字を渡す" />
  </div>
</template>

<script>
import EditFormview from "./test.vue";
export default {
  components: {
    EditFormview
  },
  data() {
    return {
      editVisible: false,
  }
}
</script>

test.vue

<template>
  <div>test : {{ msg }}</div>
</template>
<script>
export default {
  props: ['msg'],
  data() {
    return {
        msg:'デフォルト文字',
    };
  }
}
</script>

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

回答2件

dataのmsgとpropsのmsgが重複しているからではありませんか？
propsにdefaultの文字を設定したい場合は以下のような形が基本になります。

vue
1<template>
2  <div>test : {{ msg }}</div>
3</template>
4
5<script>
6export default {
7  props: {
8    msg: {
9      type: String,
10      default: 'デフォルト文字'
11    }
12  }
13}
14</script>
15

投稿2019/08/27 01:21

nt4c

総合スコア768

コードを良く見て正確にコードを記載していただきたいです。

<template>
  <div class="source">
    <EditFormview msg="文字を渡す" />
  </div>
</template>
import EditFormview from "./test.vue";
export default {
  name: "book",
  components: {
    EditFormview
  },
  data() {
    return {
      editVisible: false,
  }
}

↓

html
1<template>
2  <div class="source">
3    <EditFormview msg="文字を渡す" />
4  </div>
5</template>
6
7<script>
8import EditFormview from "./test.vue";
9export default {
10  name: "book",
11  components: {
12    EditFormview
13  },
14  data() {
15    return {
16      editVisible: false,
17    }
18  }
19}
20</script>