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

      
  
 props传递给子组件 
   

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

The effect is as shown in the figure:

The v-bind directive passes the todo to each repeated component

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!