vue中的prop组件封装

学习vue有一段时间了，也写了一些东西。今天看文档突然看到了一个好玩的东西，那就是prop。prop的作用是父组件中引用了子组件并给子组件加了一个属性，这个属性可以是静态的，可以是动态的，可以是数字，可以是字符串，可以是数组，还可以是对象。接下来就展示改怎么用。

一、props不设置具体的类型字段(不常用)

传静态的属性

子组件：

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

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

父组件：

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

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  }
};
</script>

好了，这样就完成了一个最简单的使用prop接收父元素的值

传动态字符串

子组件

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

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

父组件

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

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

可以看到，子组件我未做任何修改，只是在父组件做了一些修改

传动态数组

子组件

<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">
    <HelloWorld :msg="hello"/>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

传动态对象

子组件

<template>
  <div>
    <h1>{{ msg.id }}</h1>
    <h2>{{ msg.name }}</h2>
  </div>
</template>

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

父组件

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

<script>
import HelloWorld from "./components/HelloWorld.vue";

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

二、props的状态进行验证（常用）

父子组件中页面模板的写法与引用与上述一致，区别在于子组件script标签内props字段的写法

prop的状态即类型可以为

String
Number
Boolean
Array
Object
Date
Function
Symbol

可以接收不同的数据类型，这里列出了常用的数据类型的设置默认值的写法

props: {}填入

refAge: {
type: Number,
default: 0
},
refName: {
type: String,
default: ''
},
hotDataLoading: {
type: Boolean,
default: false
},
hotData: {
type: Array,
default: () => {
return []
}
},
getParams: {
type: Function,
default: () => () => {}
},
meta: {
type: Object,
default: () => ({})
}