What does prop mean in vuejs

In vuejs, prop is a custom property used by the parent component to pass data. Subcomponents need to explicitly declare "prop" using the props option; when using non-string templates, the prop name form will be converted from camelCase to kebab-case (dash separated).

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

1. Use Prop to pass 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 child component needs to explicitly declare "prop" with 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

is similar to using v-bind to bind HTML features to an expression. You can also use v -bindDynamicly 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 is passed as the string "1" rather than as an 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 data Flow

prop is single-bound: when the properties of the parent component change, it 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 will only use 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. Define a local data attribute and use the initial value of prop as the initial value of local data.

props: [‘initialCounter’], 
 data: function () { 
 return { counter: this.initialCounter} 
 }

    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

6. Prop verification

The component 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 a string array, 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 constructor, detected using instanceof. When prop validation fails, a warning will be thrown if you are using the development version.

Related recommendations: "vue.js Tutorial"

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