How Vue components pass and receive prop properties

How Vue components pass and receive prop attributes requires specific code examples

Vue is a popular JavaScript framework that is widely used in front-end development. In Vue, components are the basic units for building applications. Components can pass properties (props) and receive properties (props), allowing data interaction between components. This article will introduce in detail how Vue components pass and receive prop attributes, and provide specific code examples.

Passing prop attributes

In Vue, you can pass prop attributes by using the v-bind directive on the component tag. The v-bind directive is used to dynamically bind one or more properties to an expression. The following is an example that demonstrates how to pass a string type prop attribute:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  data() {
    return {
      parentMessage: "Hello from parent"
    };
  },
  components: {
    ChildComponent
  }
};
</script>

In the above code, the parent component passes a prop attribute named message to the child component, And bound to the parentMessage data in the parent component.

In child components, you can receive passed prop properties by declaring the property in the props option. The following is a code example for a subcomponent:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

In the above code, a property named message is declared in the props option and its type is specified is a string. required: trueIndicates that this attribute is required. If the parent component does not pass this attribute, a warning will be output on the console.

Receive prop attributes

Once a prop attribute is declared in a child component, it can be used in the child component's template. The following is an example that shows how to receive and use prop attributes in a child component:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

In the above code, {{ message }} is used to display in the template of the child component The passed prop attribute. The child component will display Hello from parent.

It should be noted that once the prop attribute is declared and used in a child component, it will be considered a read-only property. If you try to modify the value of the prop attribute inside a child component, Vue will output a warning to the console.

Default value

You can set a default value for the prop attribute. When the parent component does not pass this attribute, the default value will be used. The following is an example:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent
  }
};
</script>

In child components, you can set the default value through the default option:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Default message"
    }
  }
};
</script>

In the above code, if the parent component does not pass message attribute, the child component will display Default message.

Summary:

This article introduces how Vue components pass and receive prop attributes, and provides specific code examples. In Vue, prop properties can be passed to child components by using the v-bind directive, and the child component can receive them by declaring and using these properties in the props option. Additionally, you can set default values ​​for prop properties. Mastering this knowledge allows developers to perform component development more effectively and realize data interaction between components.

The above is the detailed content of How Vue components pass and receive prop properties. For more information, please follow other related articles on the PHP Chinese website!