本篇文章主要介绍了vuejs组件之间通过props交互及验证的方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”。
父组件通过props将数据传递给子组件
HTML
nbsp;html>Vue 测试实例 - 菜鸟教程(runoob.com) props传递给子组件
// Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '{{ message }}'})// 创建根实例new Vue({ el: '#app'})
登录后复制
立即学习“前端免费学习笔记（深入）”；
效果如图：
动态 props组建数据传递
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
HTML
nbsp;html>Vue 测试实例 - 菜鸟教程(runoob.com)
// 注册Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '{{ message }}'})// 创建根实例new Vue({ el: '#app', data: { parentMsg: '父组件内容' }})
登录后复制
立即学习“前端免费学习笔记（深入）”；
效果如图：
v-bind 指令将 todo 传到每一个重复的组件中
HTML
nbsp;html>Vue 测试实例 - 菜鸟教程(runoob.com)
Vue.component('todo-item', { props: ['todo'], template: '
登录后复制
立即学习“前端免费学习笔记（深入）”；
效果如下：
注意: props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
组件为 props 指定验证要求
props 是一个对象而不是字符串数组时，它包含验证要求：
JS
Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组／对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } }})登录后复制
立即学习“前端免费学习笔记（深入）”；
type 可以是下面原生构造器：
String
Number
Boolean
Function
Object
Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
Vue中封装input组件的介绍
Vue中封装input组件的介绍
Vue中封装input组件的介绍
立即学习“前端免费学习笔记（深入）”；
以上就是VueJS组件之间通过props交互及验证的方式的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2747687.html
