本文主要是介绍【Vue2.x】props技术详解，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.什么是prop？
- 定义：组件标签上注册的一些自定义属性
- 作用：向子组件传递数据
- 特点
- 可以传递任意数量的prop
- 可以传递任意类型的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数据的更新，会单向向下流动，影响到子组件
这篇关于【Vue2.x】props技术详解的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
