親から子にリテラル文字列が渡らない

vuejsで開発をしています。

基本的なところからわからないので質問いたします。
親から子へ文字列データが渡りません。

呼び出し元属性名のキャメルケースなどに影響が内容fooなどの文字にしても認識されません。
データではなく、リテラル文字列を渡したいです。

"aaaaaaaaaaaaaaaaaaa"という文字列を子のほうで扱いたいです。

propのデフォルト値'Office'はコンソールに出力されるので子供の単一コンポーネント側については
そこまでの誤りがないと思うのですが、なにかわかる方は教えていただけないでしょうか。

HTML
1// 呼び出し元 抜粋
2<div id="app" >
3    <file-upload  foo="aaaaaaaaaaaaaaaaaaa"></file-upload>
4</div>
5<script src="/js/app.js"></script>

javascript
1// app.js 抜粋
2import fileApp from './components/FileUpload.vue';
3
4let app = new Vue({
5render(h){
6        return h(fileApp);
7    }
8}).$mount('#app');
9

vuejs
1
2// 抜粋
3<template>
4    <div class="container">
5        <span>{{ foo }}</span>
6    </div>
7</template>
8
9<script>
10// 抜粋
11export default {
12        mounted() {
13            console.log(this.foo);
14        },
15        props: {
16            foo : {
17                type: String,
18                default: 'Office'
19            }
20        }
21    }
22</script>
23

※申し訳ありませんが、公式ドキュメント見ろFAのみの回答はご遠慮ください。

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

回答3件

一部のみvueで実装していて、エントリポイントとコンポーネントをまとめてできないかと格闘していましたが、結局お二方からご提案いただいたよう分けることで問題なく動きそうです。

VueRouterを利用せず、エントリポイントからrender関数を介してpropで値の受け渡しをするには指定してあげる必要がある感じでした。

HTML
1<html>
2<body>
3  <div id="app">
4  </div>
5  <script src="./index.js"></script>
6</body>
7</html>

index.js

JavaScript
1import App from './components/App.vue';
2
3let app = new Vue({
4  render: function(h){
5    return h(App , { props : { foo : this.$el.attributes.foo.value }} )
6  }
7}).$mount('#app');

App.vue

Vue
1<template>
2  <div id="root>"
3    <file-upload foo="aaaaaaaaaaaaaaaaaaa"></file-upload>
4  </div>
5</template>
6
7<script>
8import FileUpload from './FileUpload.vue'
9
10export default = {
11  components: {
12    FileUpload
13  }
14}
15</script>
16

お忙しい中ご回答いただきまして誠にありがとうございました。

投稿2019/02/25 01:38

a-chan0000

総合スコア15

ベストアンサー

mountに指定した要素の中にコンポーネント書くのってありなんでしたっけ？
それでよければ以下のようにcomponent登録が不足しているので追加です
あとオブジェクトの中にrender関数が書かれててよくわからないので修正します。

import fileApp from './components/FileUpload.vue';

let app = new Vue({
  components: {fileApp},
  render: function(h){
    return h(fileApp)
  }
}).$mount('#app');

私は普段こうしてますー

html
1<html>
2<body>
3  <div id="app">
4  </div>
5  <script src="./index.js"></script>
6</body>
7</html>

js
1let app = new Vue({
2  render: function(h){
3    return h(fileApp)
4  }
5}).$mount('#app');

↓App.vue

vue
1<template>
2  <div id="root>"
3    <file-upload foo="aaaaaaaaaaaaaaaaaaa"></file-upload>
4  </div>
5</template>
6
7<script>
8import FileUpload from './FileUpload.vue'
9
10export default = {
11  components: {
12    FileUpload
13  }
14}
15</script>
16

投稿2019/02/21 15:21

編集2019/02/21 15:59

yu-smc

総合スコア610

render関数良くわからないので使わないでやるとしたら

index.html

html
1<html>
2<body>
3  <div id="app">
4    <file-upload foo="aaaaaaaaaaaaaaaaaaa"></file-upload>
5  </div>
6  <script src="./index.js"></script>
7</body>
8</html>

FileUpload.vue

vue
1<template>
2  <div class="container">
3    <span>{{ foo }}</span>
4  </div>
5</template>
6
7<script>
8// 抜粋
9export default {
10  mounted() {
11    console.log(this.foo);
12  },
13  props: {
14    foo: {
15      type: String,
16      default: 'Office',
17      required: true
18    }
19  }
20}
21</script>

index.js

JavaScript
1import Vue from 'vue/dist/vue.esm.js';
2import FileUpload from './FileUpload.vue';
3
4let app = new Vue({
5  components: {
6    FileUpload,
7  },
8}).$mount('#app');