Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use vuejs prop". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use vuejs prop.

The usage of vuejs prop: 1, use Prop to pass data, statements such as ""; 2, use v-bind to dynamically bind the value of props to the data of the parent component, and so on.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

Basic usage of Vuejs Prop

First, use Prop to transfer data

The scope of the component instance is isolated. This means that the data of the parent component cannot and should not be referenced directly within the template of the child component. You can use props to pass data to subcomponents.

Prop is a custom property used by the parent component to pass data. Declare "prop" with the props option where the subcomponent needs to be displayed

Vue.component ('child', {props: [' message'], template:' {{message}'})

Then pass it a normal string:

Results:

Hello!

II. CamelCase vs.kebab-case

Html is not case sensitive. When using a non-string template, the name form of prop changes from camelCase to kebab-case (separated by dashes):

/ / camelCaseVue.component ('child', {props: [' myMessage'], template:' {{message}'}) / / kebab-case

Again, if you are using a string template, don't worry about these restrictions.

Third, dynamic Prop

Similar to binding the HTML property to an expression with v-bind, you can also use v-bind to dynamically bind the value of props to the data of the parent component. Whenever the data of the parent component changes, the change is also transmitted to the child component.

Using the abbreviated syntax of v-bind is usually simpler:

Literal quantity grammar vs dynamic grammar

Because it is a literal prop, its value is passed as the string "1" rather than the actual number. If you want to pass an actual JavaScript number, you need to use v-bind so that its value is evaluated as an JavaScript expression:

V. individual data flow

Prop is singly bound: when the properties of the parent component change, it is passed to the child component, but not vice versa. This is to prevent the child component from inadvertently modifying the state of the parent component-which makes the data flow of the application difficult to understand. At the same time, it is also easy to understand that the parent component is a high degree of abstraction of the child component, which represents the common part of the child component. The change of the data of a component does not change its abstraction, but the change of its abstraction represents the change of all the child components.

In addition, each time the group is gradually updated, all prop of the child components are updated to the latest values. This means that you should not change the prop within the subcomponent. If you do, Vue will give you a warning on the console.

There are usually two ways to change prop:

1.prop is passed in as the initial value, and then the child component simply uses its initial value as the initial value of the local data

2.prop is passed in as the original value that needs to be transformed.

More specifically, these two situations are:

a. Define a local data attribute and take the initial value of prop as the initial value of the local data. "`prop: ['initialCounter'], data: function () {return {counter: this.initialCounter}} b. Define a computed attribute, which is calculated from the value of prop. ```props: [' size'], computed: {normalizedSize: function () {return this.size.trim (). ToLowerCase ()}}

VI. Prop verification

Component can specify validation requirements for the props. If no validation requirement is specified, Vue issues a warning. This is useful when components are used by others.

When prop is an object rather than an array of strings, it contains validation requirements:

Vue.component ('example', {props: {/ / basic type detection (`null` means any type is OK) propA: Number, / / multiple types propB: [String, Number], / / required and string propC: {type: String, required: true}, / / number Default values propD: {type: Number, default: 100}, / / default values of array / object should be returned by a factory function propE: {type: Object, default: function () {return {message: 'hello'} / / Custom verification function 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 that uses instanceof detection. When prop validation fails, a warning is thrown if you are using a development version.

Thank you for your reading, the above is the content of "how to use vuejs prop", after the study of this article, I believe you have a deeper understanding of how to use vuejs prop, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.