如何將數據傳遞給Vue.js中的單個文件組件？

Question

我有一個單一的文件組件header.vue：

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

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

我需要它在我的代碼如下

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

，並稱之爲：

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

組件呈現，但文字說Header text而不是New header text。爲什麼？

Answer 1

我認爲可以解決這個兩種方式：

1. 你可以通過標題爲props

要通過道具，你必須做出header.vue以下更改：

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

並且將其命名爲：

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

1. 您可以將標題作爲vuex變量並在header組件中使用。

Answer 2

這裏有兩個單獨的組件，即標頭組件和您創建的匿名組件（使用new Vue()）。匿名組件將Header組件作爲其子組件呈現。這兩個組件都有獨立的data屬性;父母有text = 'New header text'，孩子有text = 'Header text'。

有兩種方法（把我的頭頂部），你可以做到這一點：

1. 擴展頭組件，並用新值來覆蓋其text數據屬性：

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

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

1. 通過將text替換爲prop，您將能夠將數據從父級傳遞給子級：

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"/>', 
});