如何将数据传递给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"/>', 
});