Props — Vue.js | vue props用法
ThispageassumesyouvealreadyreadtheComponentsBasics[1].Readthatfirstifyouarenewtocomponents.PropsDeclaration[2]VuecomponentsrequireexplicitpropsdeclarationsothatVueknowswhatexternalpropspassedtothecomponentshouldbetreatedasfallthroughattributes(whichwillbediscussedinitsdedicatedsection[3]).InSFCsusing
This page assumes youve already read the Components Basics[1]. Read that first if you are new to components.
Props Declaration [2]Vue components require explicit props declaration so that Vue knows what external props passed to the component should be treated as fallthrough attributes (which will be discussed in its dedicated section[3]).
In SFCs using <script setup>, props can be declared using the defineProps() macro:
vue<script setup> const props = defineProps([foo]) console.log(props.foo) </script>In non-<script setup> components, props are declared using the props[4] option:
jsexport default { props: [foo], setup(props) { // setup() receives props as the first argument. console.log(props.foo) } }Notice the argument passed to defineProps() is the same as the value provided to the props options: the same props options API is shared between the two declaration styles.
Props are declared using the props[5] option...