客户端组件中使用的 Vuejs 道具

Question

您好，我正在尝试将一个值作为道具传递给子组件，并尝试在子组件的 created 钩子中使用该值，但它没有被设置。请参阅下面的示例，

<!-- 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>

如上代码所示，在渲染子组件时，可能会多次未定义子组件的created()钩子中的customer_id。如果热加载发生在同一个视图上，它偶尔会出现。如何确保此值始终可用。在这种情况下，我想做服务器调用以获取客户详细信息。同时 {{foo}} 正确显示值 'bar'。我错过了什么？任何帮助表示赞赏。

Answer 1

注册的子组件实际上可以直接访问路由参数，因为您使用的是Dynamic Route Matching，您可以简单地通过$routes.params.*从子组件本身获取动态参数。

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>