首页 > 其他分享 >28-Vue脚手架-props配置项

28-Vue脚手架-props配置项

时间:2023-10-25 09:33:32浏览次数:36  
标签:Vue name age 28 sex props 默认值 String

props配置项

props 让组件接收外部传过来的数据

1)传递数据

这里需要注意,通过 age = "18"的方式,传递进去的数据是字符类型的,通过动态绑定 :age = "26" 的方式,传递进去的数据是整型类型

<!--这里需要注意,:age="26" 代表 v-bind动态绑定,传入的age是int类型-->
<Student name="马铃薯1" :sex="'男'" :age="26"></Student>

<!--这里的 age="18",传入的age是字符串类型-->
<Student name="马铃薯2" sex="男" age="18"></Student>

2)接收数据

第一种方式(只接收)

// props 配置项(开发过程中,用的比较多)
// 简单声明接收
props:["name","sex","age"],

第二种方式(限制类型)

// 接收的同时,对数据进行类型限制
props:{
    name:String,
        sex:String,
        age:Number,
},

第三种方式(限制类型、限制必要性、指定默认值)

// 接收的同时,对数据进行类型限制 + 默认值的指定 + 必要性的限制
props:{
    name:{
        type:String,    // name的类型是字符串
            required:true   // name是必要的
    },
    sex:{
        type:String,    // sex的类型是字符串
            default:"男"    // 默认值
    },
    age:{
        type:Number,    // age的类型是整型
            // default:18      // 默认值
            required:true   // name是必要的
    }
}

注意:一般使用props配置项定义的属性,是不建议进行修改的,props是只读的,Vue底层会监测你对props的修改,如果进行了修改,就会发出警告,若义务需求确实需要修改,那么请复制 props 的内容到 data 中,然后去修改 data 中的数据

 

src/components/Student.vue(这里是重点,props配置项)

<template>
  <div>
    <h1>{{msg}}</h1>
    <h2>学生姓名:{{name}}</h2>
    <h2>学生性别:{{sex}}</h2>
    <h2>学生年龄:{{myAge+1}}</h2>
    <button @click="updateAge">点击修改年龄信息</button>
  </div>
</template>

<script>
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:"Student",
    data(){
      return{
        msg:"这是一名来自遥远星球的学生信息",
        // 如果要实现 Student组件 实现多个学生信息,这里不建议写死,可以通过 props 配置项来实现
        // name:"马铃薯",
        // sex:"男",
        // age:26

        // 一般来说,在 props 配置项 定义的属性,是不建议进行修改的,如果要进行修改,可以通过在 data 中定义另一个变量
        myAge:this.age
      }
    },
    methods:{
      updateAge(){
        this.myAge++
      }
    },
    // props 配置项(开发过程中,用的比较多)
    // 简单声明接收
    // props:["name","sex","age"],

    // 接收的同时,对数据进行类型限制
    // props:{
    //   name:String,
    //   sex:String,
    //   age:Number,
    // },

    // 接收的同时,对数据进行类型限制 + 默认值的指定 + 必要性的限制
    props:{
      name:{
        type:String,    // name的类型是字符串
        required:true   // name是必要的
      },
      sex:{
        type:String,    // sex的类型是字符串
        default:"男"    // 默认值
      },
      age:{
        type:Number,    // age的类型是整型
        // default:18      // 默认值
        required:true   // name是必要的
      }
    }
  }

</script>

src/App.vue

<template>
  <div>
    <!--学生1的信息-->
    <!--这里需要注意,:age="26" 代表 v-bind动态绑定,传入的age是int类型-->
    <Student name="马铃薯1" :sex="'男'" :age="26"></Student>
    <hr/>
    <!--学生2的信息-->
    <!--这里的 age="18",传入的age是字符串类型-->
    <Student name="马铃薯2" sex="男" age="18"></Student>
  </div>
</template>

<script>
  // 引入School组件
  import Student from "@/components/Student.vue";

  export default{
    name:"App",
    components:{
      Student:Student,
    }
  }
</script>

src/main.js

import Vue from "vue"
import App from "./App.vue"

// 阻止 vue 在启动时生成生产提示
Vue.config.productionTip = false

new Vue({
    el:"#app",
    render:h => h(App)
})

 

标签:Vue,name,age,28,sex,props,默认值,String
From: https://www.cnblogs.com/REN-Murphy/p/17786363.html

相关文章

  • Vue无线滚动不触发问题
    Vue的v-infinite-scroll="load" 会无线触发  要定义实际高度和可视高度之间关系设置style="overflow:auto;height:calc(100vh - 49px)"  100vh = 100% <divclass="box"style="overflow:auto;height:calc(100vh-100px)"><divv......
  • 转载 vue-cli5降级为vue-cli4
    vue-cli5降级为vue-cli41.启动命令行,运行npmconfigls-l,找到userconfig路径下的.npmrc文件进行删除;2.输入wherevue,把vuevue.cmd这两个文件删除;3.输入vue-V,会显示‘vue’不是内部或外部命令,也不是可运行的程序或批处理文件。4.运行npmunivue-cli-g;5.安装任意指定......
  • LeetCode 283. 移动零
    移动零题目链接283.移动零给定一个数组nums,编写一个函数将所有0移动到数组的末尾,同时保持非零元素的相对顺序。请注意,必须在不复制数组的情况下原地对数组进行操作。示例1:输入:nums=[0,1,0,3,12]输出:[1,3,12,0,0]示例2:输入:nums=[0]输出:[0]题......
  • Vue
    Vue一套前端框架,免除原生JavaScript中的DOM操作,简化书写基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷,更加高效。<head></head>中引入官方......
  • 记录--vue3实现excel文件预览和打印
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助前言在前端开发中,有时候一些业务场景中,我们有需求要去实现excel的预览和打印功能,本文在vue3中如何实现Excel文件的预览和打印。预览excel关于实现excel文档在线预览的做法,一种方式是通过讲文档里的数据处理成......
  • 【全志R128开发经验分享】启用USB ADB以及无线ADB配置方法
    首先在FreeRTOS的环境下,选择r128_c906_pro:sourceenvsetup.shlunch_rtosr128s2_pro_c906USBADB的配置比较常规,注意以下几个驱动的勾选usbdevice驱动adbgadget驱动adbd应用运行menuconfig,选择对应的驱动以及软件包:mrtos_menuconfig配置好的图片如下图所示当选......
  • 1128. 信使
    这道题要求的就是最短路中的最大值注意:Floyd算法中第一重循环是[1,n]而不是[1,n),因为1~n中任何一个点都有可能是中转点。#include<iostream>#include<algorithm>#include<cstring>usingnamespacestd;constintN=105;intn,m,f[N][N],ans;intmain(){......
  • 多个vue项目共用组件
    本文主要介绍引入本地的自己写的组件。1.准备3个vue2项目  demo-common文件夹里是组件在demo1和demo2中都需要使用 2.在demo-common文件夹里新建index.js文件,跟package.json同级。在index.js文件里导出在其他项目里需要用到的组件 3.分别在demo1和demo2的终端里输入......
  • log4j漏洞CVE-2021-44228复现-排雷篇
    一、环境搭建(用相同的环境才能保证一定成功)下载vulhub,其他环境可能存在GET请求无效问题:gitclonehttps://github.com/vulhub/vulhub.git切换到指定漏洞环境目录:vulhub/log4j/CVE-2021-44228开启docker:dockercomposeup-d➜vulhubgit:(master)cdvulhub/log4j/CVE-20......
  • vue + element ui 树形半选传父级id给后台,回显实现
    1.vue2:  需要关联父子级:Html部分check-strictly="false"<el-tree:data="dataTree"highlight-currentshow-checkbox:check-strictly="false"node-key="id":props="defaultProps&......