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

Question

I'm having trouble figuring out how to render a parent component, display a list of contracts in a list on part of the page, and when a user clicks on one of them, display the details of that specific contract on the other part of the page.

Here is my slim file:

#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'
      }
    }
  });

Basically I'd like it so that when a user clicks on any contract item in the .filter-section, it shows the data for that contract in the .display-section. How can I achieve this?

Answer 1

In short you can bind a value to a prop .

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

view-contract

props: ['contract']

contracts-area

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

---

There are multiple ways to pass data in Vue.

1. Binding values to props .
2. Using ref to directly call a method from a child component.
3. Custom Events . Note that to pass events globally, you will need a global event bus.
4. A single central source of truth (ie vuex )

I have illustrated methods 1, 2, 3 in Codepen

Note that 2 nd and 3 rd methods will only work after your component has been rendered. In your case, since your components for currentView are dynamic and when user clicked, display-section component does not yet exists; it will not receive any events yet. So their content will be empty at first.

To workaround this you can directly access $parent in mounted() from child component, however this would create coupling between them. Another solution is creating the components but conditionally displaying them. And one another solution would be waiting until child component has been mounted and then emitting events.

If your needs are simple I suggest binding values to props ( 1 ), else you may consider using something like vuex.