Vue.js

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

官方教程Prop中的例子使用的是全局注册的组件。但是我使用了babel，组件是局部注册的：

    components: {
      IconBase,
      IconBird,
      Products,
      Billing,
      Account,
    },

官方教程容易使人误解为需要在父组件中使用props选项。菜鸟教程中也有不严谨的描述：

prop 是父组件用来传递数据的一个自定义属性。

我认为应该改为：

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

正确的理解是，子组件需要使用props选项声明自己的prop属性。然后在父组件调用子组件时进行绑定。

示例如下

子组件需要显式声明“prop”：

<script>
  export default {
    name: 'Account',
    props: ['userName'],
    data() {
      return {
        current: ['1'],
      };
    },
  };
</script>

父组件中，子组件使用v-bind动态绑定自己的props到父组件的数据中：

<template>
      <a-layout-content class="lay-c">
        <Products v-if="navKey === 'Products'" />
        <Billing v-if="navKey === 'Billing'" />
        <Account v-if="navKey === 'Account'" v-bind:userName="userName"/>
      </a-layout-content>
</template>

代码详情

来源：oschina

链接：https://my.oschina.net/wffger/blog/3153705