Can we use props to pass variable in vue?

Passing objects from one component to a child component is the purpose of props.

You can pass many items through props. VueJS has the following types built-in:

• String
• Number
• Boolean
• Array
• Object
• Function
• Promise

In the V3 VueJS guide it gives the following example of a prop being passed into a component and then being logged to the console inside the setup() method.

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

However, when using props, you should always mark whether the is required, what its type is and what the default is if it is not required.

For example:

export default {
  props: {
    title: String, // This is the type
    required: false, // If the prop is required
    default: () => 'defaultText' // Default needed if required false
  },
  setup(props) {
    console.log(props.title)
  }
}

It's important to note that when using default, the value must be returned from a function. You cannot pass a default value directly.