props的默认写法 : 数组

父组件 : 

<template>
  <!-- 1.展示why的个人信息 -->
  <show-info name="why" :age="18" :height="1.88" 
             address="广州市" abc="cba" class="active" />
</template>

<script>
  import ShowInfo from './ShowInfo.vue'

  export default {
    components: {
      ShowInfo
    }
  }
</script>

<style scoped>
</style>
子组件 : 

<template>
  <div class="infos">
    <h2 :class="$attrs.class">姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <h2>身高: {{ height }}</h2>
  </div>
</template>

<script>
  export default {
    // 作用: 接收父组件传递过来的属性
    // props数组语法  弊端: 1> 不能对类型进行验证 2.没有默认值的
    props: ["name", "age", "height"]
  }
</script>

<style scoped>
</style>

 

posted @ 2022-08-22 11:37  杨建鑫  阅读(235)  评论(0编辑  收藏  举报