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

This article mainly introduces "how to use props in Vue.js". In daily operation, I believe many people have doubts about how to use props in Vue.js. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "how to use props in Vue.js". Next, please follow the editor to study!

What is Props in Vue.js?

"Props" is a special keyword that represents an attribute. It can be registered on a component to pass data from the parent component to one of its child components.

This is much easier than using a state management library like vuex in a Vue.js application.

Data in props can only flow in one way-- from the top or parent component to the bottom or child component. This simply means that you cannot pass data from the child to the parent.

Another thing to keep in mind is that the Props is read-only and cannot be modified by child components because the parent component "owns" the value.

Now let's strike a balance-- the parent component passes the props to the child component, and the child component issues events to the parent component.

How to register props in an assembly

Now let's see how to register props with the component.

Vue.component ('user-detail', {props: [' name'], template:'

Hi {{name}}

). Js

Or, in the Vue single file component:

{{name}}

Export default {props: ['name']}

In the above code, we have registered a prop called name, which we can call in the template section of our application.

Note: this is a child component, and this prop will receive data from the parent component. I will explain this point in detail later.

How to use multiple props

You can have multiple prop by appending them to the props array, like this:

Vue.component ('user-detail', {props: [' firstName', 'lastName'], template:'

Hi {{firstName}} {{lastName}}

'})

Or, in the Vue single file component:

Hi {{firstName}} {{lastName}}

Export default {props: ['firstName',' lastName'],} Vue.js prop type

To specify the type of prop to use in Vue, you will use objects instead of arrays. You will use the attribute name as the key for each attribute and the type as the value.

If the data type passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning. Valid types that you can use are:

String

number

Boolean value

Array

Object

Date

Function

Symbol

Vue.component ('user-detail', {props: {firstName: String, lastName: String}, template:'

Hi {{firstName}} {{lastName}}

'})

Or, in the Vue single file component:

Hi {{firstName}} {{lastName}}

Export default {props: {firstName: String, lastName: String},} how to pass data to props in Vue

The main goal of using props is to transmit data / information. You can use v-bind to pass your value as a data property, for example, in this code:

Export default {/ /... Data () {return {title: 'Understanding Props in vuejs'}}, / /...}

Or as such a static value:

Suppose we are building an application that contains many buttons with different text / background colors. Instead of repeating button syntax in all our files, create a button component and pass the text / background color as a prop.

This is the parent component:

Import Button from'. / components/Button'export default {name: 'App', data () {return {btnName: "Joel",}}, components: {Button}}

This is a subcomponent:

{{name}} export default {name: 'Button', props: {name:String, bgColor:String}}

The above code shows you how to use data properties and static values when you get data from a parent component and use it in a child component.

Note: you can also use ternary operators in prop values to check the real condition and pass values that depend on it.

Import Button from'. / components/Button'export default {name: 'App', data () {return {signedUp: true,}}, components: {Button}}

In the above code, we are examining the signedUp data properties. If it is true, the data sent should be Logout, otherwise it should be Login.

How to pass a function to props

It is relatively easy to pass a function or method to a child component as a prop. It is basically the same as passing any other variable.

But there's a reason you shouldn't use props as a function-you should use emit.

Export default {methods: {newFunction () {/ /...}; how to verify props in Vue

Vue makes it very easy to validate props. All you have to do is add the required keys and their values to the props. We can use the prop type and use to validate required:

Props: {name: {type: String, required: true}} how to set the default prop value

Before concluding this article, let's now look at how to set default values for our props. If the child component cannot obtain data from the parent component, the default value is rendered.

Vue allows you to specify a default value, as we specified before required.

Props: {name: {type: String, required: true, default: 'John Doe'}, img: {type: String, default:'.. / image-path/image-name.jpg',},}

You can also define the default value as an object. It can be a function that returns the appropriate value, not the actual value.

At this point, the study on "how to use props in Vue.js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.