做网站要有策划么,好口碑的关键词优化,网站侧边栏模板,千博企业网站管理系统旗舰版1.什么是prop#xff1f; 定义#xff1a;组件标签上注册的一些自定义属性作用#xff1a;向子组件传递数据特点 可以传递任意数量的prop可以传递任意类型的prop 2.prop校验 为了避免乱传数据#xff0c;需要进行校验 完整写法 将之前props数组的写法#xff0c;改为对象…1.什么是prop 定义组件标签上注册的一些自定义属性作用向子组件传递数据特点 可以传递任意数量的prop可以传递任意类型的prop 2.prop校验 为了避免乱传数据需要进行校验 完整写法 将之前props数组的写法改为对象的写法 值得注意的是这个非空校验指的是万一忘记传值忘了在标签中写自定义属性 仅类型校验最常用 prop data的异同点 共同点都可以给组件提供数据 区别 data的数据是自己的 - 想咋改咋改prop的数据是外部的 - 不能直接改要遵循 单向数据流 案例加减器 数据count是父组件的子组件的加减按钮的功能不能直接count count--了需要子传父的写法 App.vue
templatediv classappBaseCount :Countcount CountAddCountAdd CountSubCountSub/BaseCount/div
/templatescript
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;},}
}
/scriptstyle/style
BaseCount.vue
templatediv classbase-countbutton clickrequestSub-/buttonspan{{ Count }}/spanbutton clickrequestAdd/button/div
/templatescript
export default {props: {Count: Number,},methods: {requestSub() {this.$emit(CountSub,this.Count - 1);},requestAdd() {this.$emit(CountAdd,this.Count 1);}}
}
/scriptstyle/style
单向数据流 由上面案例可以得出父组件的prop数据的更新会单向向下流动影响到子组件
