如何将数据传递给 Vue.js 中的单个文件组件？答案

【问题标题】：How to pass data to single file components in Vue.js?如何将数据传递给 Vue.js 中的单个文件组件？
【发布时间】：2017-04-14 16:35:20
【问题描述】：

我有一个文件组件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。为什么？

【问题讨论】：

我想您想通过其他组件等动态设置标题标题？或者你想达到什么目标？
您正在创建一个新的 Vue 组件，它将 Header 组件呈现为其子组件。来自父组件的数据不会以这种方式影响子组件的数据。您可以Vue.extend() Header 组件，然后用重写的数据属性实例化 that。
@DecadeMoon 所以你的意思是const Header = Vue.extend(require('components/header.vue'));，然后是new Header({ el: ..., data: { ... } });，对吧？这可行，但扩展导入看起来有点奇怪。这真的有必要吗？

标签： vue.js vue-component

【解决方案1】：

这里有两个独立的组件，Header 组件和您创建的匿名组件（使用new Vue()）。匿名组件将 Header 组件呈现为其子组件。两个组件都有单独的data 属性；父母有text = 'New header text'，孩子有text = 'Header text'。

有两种方法（我想不到）可以实现这一目标：

扩展 Header 组件并使用新值覆盖其 text 数据属性：

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

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

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

【讨论】：

【解决方案2】：

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

您可以将标头传递为props

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

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

并称它为：

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

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

【讨论】：