如何将数据传递给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

这里有两个独立的组件,Header组件和您创建的匿名组件(with new Vue()).匿名组件将Header组件呈现为其子组件.两个组件都有不同的data属性; 父母text = 'New header text'和孩子都有text = 'Header text'.

有两种方法(在我的头顶),你可以实现这一点:

1. 扩展Header组件并text使用新值覆盖其data属性:

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

Answer 2

我认为可以有两种方法来解决这个问题：

1. 你可以将 header 作为props传递

要传递道具，您必须进行以下更改header.vue：

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

并称其为：

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

2. 您可以将 header 作为vuex变量并在header组件中使用它。