Javascript

vue组件传参

本文主要是介绍vue组件传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

父视图，通过属性传入参数

<template>
  <div class="home">
    <Index name="Zhang" age="18"/>
  </div>
</template>

<script>
import Index from '@/components/Index.vue'

export default {
  name: 'Home',
  components: {
    Index
  }
}
</script>

子组件获取参数props

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <h1>{{ age }}</h1>
  </div>
</template>

<script>
export default {
  name: "Index",
  props: {
    name: String,
    age: Number,
  },
};
</script>

<style scoped lang="scss">
</style>
这篇关于vue组件传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航