javascript - 渲染 vue.js 组件并传入数据

Question

我无法弄清楚如何呈现父组件，在页面的一部分列表中显示契约(Contract)列表，以及当用户单击其中一个时，在页面上显示该特定契约(Contract)的详细信息页面的其他部分。

这是我的超薄文件:

#contracts_area
  .filter-section
     ul
       li.filter-item v-for="contract in contractsAry" :key="contract.id" @click="showContract(contract)"
        | {{ contract.name }}
  .display-section
    component :is="currentView" transition="fade" transition-mode="out-in"

script type="text/x-template" id="manage-contracts-template"
  div
    h1 Blank when page is newly loaded for now

script type="text/x-template" id="view-contract-template"
  div :apply_contract="showContract"
    h1#display-item__name v-name="name"

JavaScript:

Vue.component('manage-template', {
    template: '#manage-contracts-template'
  });

  Vue.component('view-contract', {
    template: '#view-contract-template',
    props: ['show_contract'],
    data: function() {
      return {
        name: ''
      }
    },
    methods: {
      showContract: function(contract) {
        return this.name = contract.name
      }
    }
  });

  Vue.http.headers.common['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content');
  var contractsResource = Vue.resource('/all_contracts{/id}.json');

  var contracts = new Vue({
    el: '#contracts_area',
    data: {
      currentView: 'manage-template',
      contractsAry: [],
      errors: {}
    },
    mounted: function() {
      var that = this;
      contractsResource.get().then(
        function(res) {
          that.contractsAry = res.data;
        }
      )
    },
    methods: {
      showContract: function(contract) {
        this.currentView = 'view-contract'
      }
    }
  });

基本上我希望这样当用户单击 .filter-section 中的任何契约(Contract)项目时，它会在 .display-section 中显示该契约(Contract)的数据。我怎样才能做到这一点？

Answer 1

简而言之，您可以将值绑定(bind)到 prop .

.display-section
  component :is="currentView" :contract="currentContract"

查看契约(Contract)

props: ['contract']

契约区

data: {
  currentContract: null,
},
methods: {
  showContract: function(contract) {
    this.currentView = "view-contract";
    this.currentContract = contract;
  }
}

---

在 Vue 中有多种方式传递数据。

1. 将值绑定(bind)到 props .
2. 使用ref直接从子组件调用方法。
3. > Custom Events .请注意，要在全局范围内传递事件，您将需要一个全局事件总线。
4. 单一的中央真相来源(即 vuex )

我在 Codepen 中说明了方法 1、2、3

请注意，2nd 和3rd 方法仅在您的组件呈现后才有效。在您的情况下，由于您的 currentView 组件是动态的，并且当用户单击时，显示部分组件尚不存在；它还不会收到任何事件。所以他们的内容一开始是空的。

要解决此问题，您可以直接从子组件访问 mounted() 中的 $parent，但这会在它们之间产生耦合。另一种解决方案是创建组件，但 conditionally displaying他们。另一种解决方案是等到子组件已安装，然后发出事件。

如果您的需求很简单，我建议将值绑定(bind)到 props (1)，否则您可以考虑使用 vuex 之类的东西。