vue 中的 prop

        prop的作用是父组件向子组件单向传递数据，这个过程是单向的。传递的属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象，甚至可以在传递数据的时候写一个校验函数进行校验。

1、传静态属性

子组件：

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

父组件：

<template>
  <div id="app">
    <TenantSet msg="hello" />
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {}
  }
};
</script>

 2、传动态字符串

子组件：

<template>
  <div>
    <h3>{{ msg }}</h3>
  </div>
</template>
<script>
export default {
  props: ['msg']
}
</script>

父组件：

<template>
  <div id="app">
    <TenantSet :msg="hello" />
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {
      hello: 'hello world'
    }
  }
};
</script>

父组件做了一些修改，动态绑定msg，data里面定义msg的值

3、传动态数组

子组件：

<template>
  <div>
    <ul>
      <li v-for="item in msg" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

父组件：

<template>
  <div id="app">
    <TenantSet :msg="hello" />
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {
      hello: ['aa', 'bb', 'cc']
    }
  }
};
</script>

4、传动态对象

子组件：

<template>
  <div>
    <h3>{{ msg.id }}</h3>
    <h4>{{ msg.name }}</h4>
  </div>
</template>

<script>
export default {
  props: ['msg']
}
</script>

父组件：

<template>
  <div id="app">
    <TenantSet :msg="hello" />
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {
      hello: {
        id: 1,
        name: 'hello dj'
      }
    }
  }
};
</script>

 5、对prop的状态进行验证

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

子组件：

<template>
  <div>
    <h4>{{ num }}</h4>
    <h4>{{ msg }}</h4>
    <h4>{{ obj.id }}</h4>
    <h4>{{ obj.name }}</h4>
    <ul>
      <li v-for="item in arrs" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    num: {
      type: Number
    },
    msg: {
      type: String
    },
    arrs: {
      type: Array
    },
    obj: {
      type: Object
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <TenantSet :num="num" :msg="hello" :arrs="arr" :obj="post" />
  </div>
</template>

<script>
import TenantSet from './TenantSet.vue';

export default {
  components: {
    TenantSet
  },
  data() {
    return {
      num: 10,
      hello: 'hello world',
      arr: ['aa', 'bb', 'cc'],
      post: {
        id: 1,
        name: 'hello dj'
      }
    }
  }
};
</script>

6、自定义校验函数

props: {
  status: {
    validator: function (value) {
      // 这个值必须匹配下列字符串中的一个
      return ['success', 'warning', 'danger'].indexOf(value) !== -1
    }
  }
}

 7、默认值

props: {
  num: {
    type: Number,
    default: 100
  },
}