Vue.jsの単一ファイルコンポーネントにデータを渡すには？

Question

私は、単一のファイルコンポーネントheader.vueがあります。私は

const Header = require('components/header.vue'); 

を次のように私のコードでそれを必要とし、それを呼び出す

<template> 
    <h1>{{text}}</h1> 
</template> 

<script> 
    export default { 
    data() { 
     return { 
     text: 'Header text', 
     }; 
    }, 
    }; 
</script> 

を：

const header = new Vue({ 
    el: '#header', 
    data: { 
    text: 'New header text', 
    }, 
    render: h => h(Header), 
}); 

コンポーネントがレンダリングされますが、テキストはNew header textの代わりにHeader textと表示されます。どうして？

Answer 1

私はこれを解決するには二つの方法があることができると思う：あなたはheader.vueで次の変更をしなければならない小道具を渡すにはprops

としてヘッダを渡すことができ

1. ：

   <script> 
       export default { 
       props: ['text'], 
       }; 
   </script> 
   

   電話番号：

   const header = new Vue({ 
       template: '<header :text="text" />', 
       data: { 
       text: 'New header text', 
       } 
   }); 
   

   2. ヘッダーをvuex変数として使用し、headerコンポーネントで使用することができます。

Answer 2

ヘッダーコンポーネントと作成した匿名コンポーネント（new Vue()）の2つのコンポーネントがあります。匿名コンポーネントは、Headerコンポーネントをその子としてレンダリングします。どちらのコンポーネントも個別のプロパティーを持っています（data）。親はtext = 'New header text'、子はtext = 'Header text'です。

あなたがこれを達成することができることを（私の頭の上から）2つの方法があります。

1. はヘッダー・コンポーネントを拡張し、新しい値でそのtextデータプロパティをオーバーライド：

const Header = require('components/header.vue'); 
const HeaderComp = Vue.extend(Header); 

const header = new HeaderComp({ 
    el: '#header', 
    data: { 
    text: 'New header text', 
    }, 
}); 

2. 代わりにtextを小道具にすると、親から子供にデータを渡すことができます。

header.vue

<script> 
    export default { 
    props: ['text'], 
    }; 
</script> 

使い方

const Header = require('components/header.vue'); 

// Using render function 

const header = new Vue({ 
    el: '#header', 
    render: h => h(Header, { 
    props: { 
     text: 'New header text', 
    }, 
    }), 
}); 

// Using template 

const header = new Vue({ 
    el: '#header', 
    components: { 
    Header, 
    }, 
    template: '<header text="New header text"/>', 
});