Vue：（二十四）脚手架之配置项props

置顶空谷有来人

于 2023-02-08 17:30:20 发布

阅读量72

点赞数

分类专栏： Vue 前端文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128939659

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

功能：让组件接收外部传来的数据

传递数据：<Demo name="xxx">

接收数据：

第一种方式（只接收）：props:['name']

第二种方式（限制类型）：props:{name:String}

第三种方式（限制类型、限制必要性、指定默认值）：props:{name:{type:String,required:true,default:'张三'}}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么就复制props的内容data中一份，然后修改data的数据

App.vue

<template>
  <div>
    <School name="西航" address="西安" />
  </div>
</template>

<script>
  //引入组件
  import School from './components/School.vue'

  export default {
    name: 'App',
    components: {
      School,
    },
  }
</script>

School.vue

<template>
  <div>
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <h2>建校时间：{{age}}</h2>
  </div>
</template>

<script>
  //组件交互相关代码（数据、方法等等）
  export default {
    name: 'SchoolVue',
    // props: ['name', 'address', 'age'],
    /* props: {
              name: String,
              address: String,
              age: Number,
            }, */
    props: {
      name: {
        type: String,
        require: true,
      },
      address: {
        type: String,
        require: true,
      },
      age: {
        type: Number,
        require: true,
        default: 100,
      },
    },
  }
</script>

我是空谷有来人，谢谢支持！