What is the usage of vuejs prop

Usage of vuejs prop: 1. Use Prop to transfer data, with statements such as "<child message="hello!"></child>"; 2. Use v-bind to dynamically bind props value to the data of the parent component and so on.

The operating environment of this article: windows7 system, vue2.9.6 version, DELL G3 computer.

Basic usage of Vuejs Prop

1. Use Prop to transfer data

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

prop is a custom property used by the parent component to pass data. The subcomponent needs to explicitly declare "prop" using the props option

Vue.component('child',{
    props:['message'],
    template:&#39;<span>{{ message }}</span>&#39;
})

and then pass it a normal string:

<child message="hello!"></child>

Result:

hello!

2. camelCase vs .kebab-case

html is not case sensitive. When using non-string templates, the prop name format will be converted from camelCase to kebab-case (separated by dashes):

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:&#39;<span>{{ message }}</span>&#39;
})

//kebab-case
<child my-message="hello!"></child>

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

3. Dynamic Prop

Similar to using v-bind to bind HTML features to an expression, 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 propagated to the child component.

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

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

<child :my-message="parrentMsg"></child>

4. Literal syntax vs dynamic syntax

Because it is a literal prop, its value starts with The string "1" is passed down instead of 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 a JavaScript expression:

5. Single-item data flow

prop is a single-item binding : When the properties of the parent component change, they will be transmitted to the child component, but not the other way around. This is to prevent child components from inadvertently modifying the parent component's state - which would make the application's data flow difficult to understand. At the same time, this is also easy to understand. The parent component is a high-level abstraction of the sub-component, representing the common parts of the sub-component. Changes in the data of one component will not change its abstraction, but changes in its abstraction represent changes in all sub-components.

In addition, every time the group is gradually updated, all props of the subcomponent will be updated to the latest values. This means you should not change props inside child components. If you do this, Vue will give a warning in the console.

There are usually two cases of changing prop:

1.prop is passed in as the initial value, and the subcomponent just uses its initial value as the initial value of local data;

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

More precisely, these two situations are:

a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。
“`
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter}
}
    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

6. Prop verification

Components can specify verification requirements for props. Vue will issue a warning if validation requirements are not specified. This is useful when the component is made available to others.

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

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 construct Device, use instanceof detection. When prop validation fails, a warning will be thrown if you are using the development version.

Recommended: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of What is the usage of vuejs prop. For more information, please follow other related articles on the PHP Chinese website!