Vuejs props use in the client component

问题

Hi I'm trying to pass a value to a child component as props and trying to use this value in child's created hook but it's not getting set. See example below,

<!-- Parent component -->
<template>
  <div>
     <details
       :customer_id = this.customer_id
       :foo = "bar" />
  </div>
</template>
<script>
  import CustomerDetail from './CustomerDetails';
  export default {
    name: 'Customer',
    data: function() {
      return {
        customer_id: '',
     }
  components: {
    'detail': CustomerDetail   
  },

  created: function() {
    var id = this.$route.params.id;
    this.customer_id = id;
  } // created
}  
</script>

<!-- Details component -->
<template>
  <div>
    <h1>{{foo}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'CustomerDetail',
    props: ['customer_id', 'foo']     

    created: function() {
      console.log(this.customer_id); <!-- -->
    } // created
  }
</script>

As shown in above code, when child component is rendered, may times the customer_id in created() hook of child component is undefined. It shows up occasionally if hotloading happens on the same view. How do I make sure that this value always available. In this case I want to do server call to get customer details. At the same time {{foo}} correctly show value 'bar'. What am I missing? Any help is appreciated.

回答1:

Registered child components actually have direct access to the route params, since you are using Dynamic Route Matching, you can simply get the dynamic params via $routes.params.* from the child components themselves.

const Customer = {
  template: `
    <div>
      <h3>Customer ID: {{$route.params.id}}</h3>
    </div>
  `
}

const routes = [
  { path: '/customers/:id', component: Customer }
];

new Vue({
  el: '#app',

  router: new VueRouter({
    routes
  }),

  data() {
    return {
      bar: 'Doh!',
      //customer_id: '',
    }
  },
  
  components: {
    CustomerDetails: {
      template: `
        <div>
          <h1>Value from parent: <em>{{foo}}</em></h1>
        </div>
      `,

      props: ['foo']
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.2/vue-router.min.js"></script>

<div id="app">
  <div>
    <label>View profile:</label>
    <router-link to="/customers/john">John</router-link>
    <router-link to="/customers/doe">Doe</router-link>
    
    <router-view></router-view>
  <div>
  
    <customer-details :foo="bar"></customer-details>
</div>

来源：https://stackoverflow.com/questions/54166782/vuejs-props-use-in-the-client-component

标签

Vue.js

vue-component