个人网站做交易类的赚钱吗,网站设计公司模板,php网站开发演讲稿,wordpress wap4 组件基础#xff08;下#xff09; 摘要 在本文中年我们会了解什么是props#xff0c;怎么利用props在父组件和子组件之间传递数据#xff1b;什么是计算属性#xff0c;还有什么是事件。 声明#xff1a;为了文章的清爽性#xff0c;在文章内部的代码演示中只会附…4 组件基础下 摘要 在本文中年我们会了解什么是props怎么利用props在父组件和子组件之间传递数据什么是计算属性还有什么是事件。 声明为了文章的清爽性在文章内部的代码演示中只会附上部分演示代码main.js文件的代码通常不贴出如果感兴趣可以前往代码仓库获取 作者来自ArimaMisaki创作 文章目录4 组件基础下4.1 props验证4.1.1 什么是props验证4.1.2 多个可能的类型4.2 计算属性4.2.1 什么是计算属性4.2.2 计算属性和方法4.3 自定义事件4.3.1 自定义组件概述4.3.2 自定义事件传参4.4 组件上的双向绑定4.4.1 为什么需要在组件上使用v-model4.4.2 实现组件间的双向绑定4.1 props验证
4.1.1 什么是props验证
说明如果你想要对外界传入组件的数据进行合法性验证则原先的props选项使用数组写法没有这个功能为此我们改用对象类型的props选项写法。props对象中的键为组件使用者传入数据值为传入数据的数据类型。 4.1.2 多个可能的类型
说明对象类型的props选项提供了多种数据验证方案如
基础的类型检查直接为组件的prop属性指定基础的校验类型从而防止组件的使用者为其绑定错误类型的数据多个可能的类型如果某个prop属性值得类型不唯一此时可以通过数组的形式为其指定多个可能的属性值必填项校验prop属性可以是一个prop对象对象中存在required和type如果开启required为true则type对应的数据类型必须满足否则控制台报错属性默认值prop对象还可以存在default表示该prop属性默认的值。自定义验证函数prop对象中可以自定义一个验证函数从而对prop属性的值进行更加精确的控制。
templatedivp数量{{count}}/pp状态{{state}}/p/div
/templatescript
export default {name:MyCount,props:{// 必填项校验count:{type:Number, // 基础类型校验required:false,default:100 // 默认值},state:Boolean,type:{validator(value){return [success,warning,danger].indexOf(value) ! -1}}}
}
/scripttemplatedivh1App根组件/h1hrMyCount :statetrue typesuccess/MyCount/div
/templatescript
import MyCount from ./Count.vue;
export default {name:MyApp,components:{MyCount,}
}
/script4.2 计算属性
4.2.1 什么是计算属性
说明我们可以向外暴露computed选项其可写作对象形式。对象中的每一项都是一个函数它可以实时监听data中数据的变化并且return一个计算后的新值。
templatedivinput typetext v-model.number countp{{count}}乘以2得{{plus}}/p/div
/templatescript
export default {name:MyCounter,data(){return {count:1,}},computed:{plus(){return this.count*2;}}
}
/scripttemplatedivh1App根组件/h1hrmy-counter/my-counter/div
/templatescript
import MyCounter from ./MyCounter.vue;
export default {name:MyApp,components:{MyCounter,}
}
/script4.2.2 计算属性和方法
疑问把方法定义在methods节点上不是一样吗为何非要定义在computed节点上
解释相对于方法来说计算属性会缓存计算的结果只有计算属性的依赖项发生变化时才会重新进行计算因此计算属性的性能更好。 4.3 自定义事件
4.3.1 自定义组件概述
说明在封装组件时为了让组件的使用者可以监听到组件内状态的变化此时需要用到组件的自定义事件。
使用步骤
声明自定义事件必须事先在emits节点中声明触发自定义事件通过this.$emit(‘自定义事件名称’)来触发监听自定义事件通过v-on的形式来监听自定义事件 4.3.2 自定义事件传参
说明如果想要让自定义的事件可以访问到组件的数据可以在自定义事件从参数列表第二位开始传入参数第一位是自定义事件名称。
templatedivpCount的值是{{count}}/pbutton clickadd1/button/div
/templatescript
export default {name:MyCount,emits:[countChange],data(){return {count:0,}},methods:{add(){this.count;// 2 触发自定义事件this.$emit(countChange,this.count)}}
}
/scripttemplatedivh1App根组件/h1hrMyCounter countChangegetCount/MyCounter/div
/templatescript
import MyCounter from ./Counter.vue;
export default {name:MyApp,methods:{getCount(val){alert(触发了val次事件);}},components:{MyCounter,}
}
/script4.4 组件上的双向绑定
4.4.1 为什么需要在组件上使用v-model
说明当我们需要维护组件内外数据的同步时可以在组件上使用v-model指令。 4.4.2 实现组件间的双向绑定
父向子同步父组件通过v-bind将数据通过props传入子组件
子向父同步在v-bind指令之前添加v-model指令并且在子组件中声明emits自定义事件当触发$emit事件时更新父组件的数据。
