JAVASCRIPT

props vue 3

// single file component
<script setup>
const props = defineProps({
  foo: String
})
</script>


// or without "setup" in script tag
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

vuejs props

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

// File you call your component
<template>
  <your-component name="name"></your-component>
</template>

vue 3 define props script setup

interface Props {
  msg?: string
}

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello'
})

Vue.js 3: How to get props value and use it in functions in script setup?

<script setup>
import { computed } from 'vue'
const props = defineProps({
  widths: {
    type: String,
    default: '100%',
  }
})
// do some stuff
// access the value by 
// let w = props.widths
</script>

vue 3 props

<script setup> // vue 3 component
const props = defineProps({ // No need to import defineProps!
  title: String, likes: Number, isPublished: Boolean,
  commentIds: Array, author: Object, callback: Function,
  contactsPromise: Promise // or any other constructor
})
... use props.title ... props.contatcsPromise
</script>

vue js props

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

Best Way to define Props vue

// Even better!
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}