Home >Web Front-end >JS Tutorial >How VueJS components interact and verify through props
This article mainly introduces the interaction and verification between VueJS components through props. It has certain reference value. Interested friends can refer to it.
props is a custom property used by the parent component to pass data. The data of the parent component needs to be passed to the child component through props, and the child component needs to explicitly declare "prop" with the props option.
The parent component passes data to the child component through props
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <p id="app"> <child message="hello world!">props传递给子组件</child> </p> <script> // Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<h1>{{ message }}</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script> </body> </html>
The effect is as shown:
Dynamic props build data transfer
Similar to using v-bind to bind HTML features to an expression, you can also use v-bind dynamically Bind the value of props to the parent component's data. Whenever the data of the parent component changes, the change will also be transmitted to the child component:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <p id="app"> <p> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </p> </p> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script> </body> </html>
The effect is as shown in the figure:
The v-bind directive passes the todo to each repeated component
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <p id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </p> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script> </body> </html>
The effect is as follows:
Note: props are one-way binding: when the properties of the parent component change, they will be transmitted to the child component, but not the other way around. .
The component specifies validation requirements for props
When props is an object instead of a string array, it contains validation requirements:
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 can be the following native constructor:
String
Number
Boolean
Function
Object
Array
#type can also be a custom constructor, detected using instanceof.
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Introduction to encapsulating input components in Vue
Introduction to Vue component communication practices
Vue2.0 Multi-Tab Switching Component Encapsulation Introduction
##
The above is the detailed content of How VueJS components interact and verify through props. For more information, please follow other related articles on the PHP Chinese website!