• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

vue组件传参

开发技术 开发技术 2周前 (04-29) 7次浏览

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

<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组件传参
喜欢 (0)