【Vue2.x】props技术详解

1.什么是prop？

• 定义：组件标签上注册的一些自定义属性
• 作用：向子组件传递数据
• 特点

1. 可以传递任意数量的prop
2. 可以传递任意类型的prop

2.prop校验

为了避免乱传数据，需要进行校验

完整写法 

将之前props数组的写法，改为对象的写法

值得注意的是这个非空校验，指的是万一忘记传值（忘了在标签中写自定义属性）

仅类型校验（最常用）

---

prop & data的异同点

共同点：都可以给组件提供数据

区别：

• data的数据是自己的 ->   想咋改咋改
• prop的数据是外部的 ->   不能直接改，要遵循 单向数据流

案例：加减器

 

数据count是父组件的，子组件的加减按钮的功能不能直接count++ count--了，需要子传父的写法

• App.vue 

<template><div class="app"><BaseCount :Count="count" @CountAdd="CountAdd" @CountSub="CountSub"></BaseCount></div>
</template><script>
import BaseCount from "./components/BaseCount.vue"
export default {components: {BaseCount,},data() {return {count: 999,}},methods: {CountAdd(newCount){this.count = newCount;},CountSub(newCount){this.count = newCount;},}
}
</script><style></style>

• BaseCount.vue

<template><div class="base-count"><button @click="requestSub">-</button><span>{{ Count }}</span><button @click="requestAdd">+</button></div>
</template><script>
export default {props: {Count: Number,},methods: {requestSub() {this.$emit('CountSub',this.Count - 1);},requestAdd() {this.$emit('CountAdd',this.Count + 1);}}
}
</script><style></style>

单向数据流

由上面案例可以得出，父组件的prop数据的更新，会单向向下流动，影响到子组件