通过道具实现VueJS组件之间的交互和验证

Props是用户定义的属性，由父组件用来传递数据。父组件的数据需要通过道具传递给子组件，子组件需要用道具选项显式声明‘prop’。

父组件通过道具将数据传递给子组件

超文本标记语言

！doctype html townleta charset=' utf-8 ' title vue测试用例-菜鸟教程(runoob.com)/title script src=' http :https://cdn . bootscs.com/vue/2 . 2 . 2/vue . min . js '/script/headsdydivided=' Props被传递给子组件/子组件/divscript//vue.component('子')，{//声明Props 3360[' message ']，//您也可以使用template33：

动态道具构建数据传输

与使用v-bind将HTML属性绑定到表达式类似，也可以使用v-bind将道具的值动态绑定到父组件的数据。每当父组件的数据发生变化时，该变化也会传递给子组件：

超文本标记语言

！doctype html townleta charset=' utf-8 ' title vue测试用例-菜鸟教程(runoob.com)/title script src=' http :https://cdn.bootcss.com/vue/2.2.2/vue.min.js'/script/headsdydiv id=' app ' div input v-model=' parentmasg ' br child v-bind : message=' parentmasg '/child/div/div script//register vue.component(' child '，{//declare props prop s :[' message ']，//您也可以使用template3360 ' span { { message } }

v-bind指令将todo传递给每个重复的组件

超文本标记语言

！doctype htmltowneta charset=' utf-8 ' title Vue测试用例-菜鸟教程(runoob.com)/title脚本src=' http :https://cdn.bootcss.com/vue/2.2.2/vue.min.js'/script/headldydiv id=' app ' ol todo-item v-for=' item in sites ' v-bind : to=' item '/todo-item/ol/divscriptvue.component(' todo-item '，{ prop :[' todo ']，template : ' Li { { todo . text } }/Li ' } '

注意： props是单向绑定的：当父组件的属性发生变化时，会传递给子组件，但不会传递给子组件。

组件规定了道具的验证要求

当props是一个对象而不是字符串数组时，它包含验证要求：

射流研究…

Vue.component ('example '，{ prop : {//基本类型检测(null '表示任何类型都可以)propA: Number，//多种类型的propB: [String，Number]，//必选和字符串propc: {type:string，required:true }，//number，默认值为propd: { type3360number，默认值为3: 100 }。//数组/对象的默认值应该由工厂函数返回：prope: { type: object，default 3360 function(){ return { message : ' hello ' } } }。//用户定义的验证函数propf : { validator : function(value){ return value 10 } } } }类型可以是以下本机构造函数：

String number布尔函数对象arraytype也可以是自定义构造函数，由instanceof检测。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。