1 简介

  props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项

2 一个简单示例

1)StudentComp.vue

<template>
<div>
<h1>{{stname}}</h1>
      <h1>{{age}}</h1>
    </div>

</template>

<script>
export default {
name:'StudentComp',
data(){
return {
stname:'学生' ,
           age:18
            }
}
}
</script>

2)SchoolComp.vue

<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp></StudentComp>
</div>
</template> <script>
import StudentComp from './StudentComp' export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script> <style> </style>

3)app.vue

<template>
<div>
<SchoolComp></SchoolComp> </div>
</template> <script> import SchoolComp from './components/SchoolComp' export default {
name:'App',
components:{
SchoolComp
}
} </script>

页面效果

3 一个需求引出props

  在上面示例的基础上,要求StudentComp组件里面的stname和age不是固定的,而是引用StudentComp组件的那个组件来决定值,这时候可以使用props属性

1)修改StudentComp.vue,添加props属性,去掉data里面的stname和age值

<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age}}</h1>
</div> </template> <script>
export default {
name:'StudentComp',
data(){
return { }
},
props:['stname','age']
}
</script>

2)修改SchoolComp.vue,在StudentComp 标签添加stname和age属性,就可以把值传到StudentComp里面去了

<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" age="18" ></StudentComp>
</div>
</template> <script>
import StudentComp from './StudentComp' export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script> <style> </style>

3)效果

4 props的三种写法

4.1 最简数组写法

  只定义参数名

props:['stname','age']

4.2 对象写法

  定义参数名和类型

  props:{
    stname:String,
    age:number
}

4.3 完整写法

  可定义类型,是否必传,默认值

props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值 }
}

5 关于非字符串类型传值的问题

1) StudentComp.vue

<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age}}</h1>
</div> </template> <script>
export default {
name:'StudentComp',
data(){
return { }
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值 }
}
}
</script>

2) SchoolComp.vue

<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" age="18" ></StudentComp>
</div>
</template> <script>
import StudentComp from './StudentComp' export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1'
}
},
components:{
StudentComp
}
}
</script> <style> </style>

3)效果

  发现{{age + 1}}在页面显示181,因为18它是字符串,age+1就是字符串拼接,就是181了

 4 ) 问题

  发现控制台报错,因为SchoolComp.vue那里通过属性传值,age="18",它会认为18是个字符串,页面就是181了

5)解决方案

  通过v-bind来设置age属性 :age="18",这样子,age属性里面的18会被按照表达式来解析,18就会作为数字了

 <StudentComp stname="学生" :age="18" ></StudentComp>

6)效果

6 props和data里面属性不允许重名

  因为props和data里面的属性都会在组件对象上面,所以是不允许重名的

  在StudentComp.vue的data里面加一个属性stname,启动报错

<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age + 1}}</h1>
</div> </template> <script>
export default {
name:'StudentComp',
data(){
return {
'stname':'小学生'
}
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值 }
}
}
</script>

7 props里面的属性的值的修改

7.1 在StudentComp里面修改

  添加一个按钮

  点击事件中去修改age的值

<template>
<div>
<h1>{{stname}}</h1>
<h1>{{age + 1}}</h1>
<button v-on:click="cli">点击</button>
</div> </template> <script>
export default {
name:'StudentComp',
data(){
return { }
},
props: {
stname: {
type: String, // 类型
required: true,// 必要性
default: 'cess'// 默认值
},
age:{
type: Number, // 类型
required: true,// 必要性
default: 18// 默认值 }
},
methods: {
cli(){
this.age = 20
}
}
}
</script>

发现报错,子组件默认不能修改父组件传的props值

7.2 SchoolComp里面修改

  添加一个按钮

  点击事件中去修改age的值

<template>
<div>
<h1 >{{schoolname}}</h1>
<StudentComp stname="学生" :age="age" ></StudentComp> <button v-on:click="cli">点击</button>
</div>
</template> <script>
import StudentComp from './StudentComp' export default {
name:'SchoolComp',
data(){
return {
schoolname:'实验小学1',
age:18
}
},
components:{
StudentComp
},methods: {
cli(){
this.age = 20
}
}
}
</script> <style> </style>

点击按钮,值改变

在传值的组件中可以修改

Vue 24 props的更多相关文章

  1. Vue中用props给data赋初始值遇到的问题解决

    Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14   作者:yuyongyu    我要评论   这篇文章主要介绍了Vue中用props给dat ...

  2. vue & watch props

    vue & watch props bug OK watch: { // props // chatObj: () => { // // bug // log(`this.chatObj ...

  3. [转]Vue中用props给data赋初始值遇到的问题解决

    原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...

  4. Vue computed props pass params

    Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...

  5. vue & components & props & methods & callback

    vue & components & props & methods & callback demo solution 1 & props & data ...

  6. vue & modal props & form data update bug

    vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...

  7. vue之props父子组件之间的谈话

    眨眼就来杭州两年了,时间真快. 我们今天来说说vue的一个api---->props 首先我们先看看一个例子,是我一个项目中写的. 看到这个:有木有一点懂了.要是没懂,继续往下看 这里我们用到了 ...

  8. vue的props和$attrs

    过去我们在vue的父子组件传值的时候,我们先需要的子组件上用props注册一些属性: <template> <div> props:{{name}},{{age}} 或者 {{ ...

  9. vue学习--Props

    Props:        props用以从父组件接收数据:                     使用:                Vue.component('child',{        ...

  10. vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数

    父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...

随机推荐

  1. WCF实现大文件上传

    一.文件服务接口 1.文件上传 2.文件传输(上传按钮) 3.文件传输停止 服务地址: 在客端添加服务器引用,从而实现客户端调用服务器的功能. 二.契约 服务契约[ServiceContract]:定 ...

  2. pytest文档82 - 用例收集钩子 pytest_collect_file 的使用

    前言 pytest 提供了一个收集用例的钩子,在用例收集阶段,默认会查找test_*.py 文件或者 *_test.py文件. 如果我们想运行一个非python的文件,比如用yaml 文件写用例,那么 ...

  3. mindxdl---common--test_tools.go

    // Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common define co ...

  4. VS 新版本无法打开旧项目问题处理

    问题 最近想阅读 WorkflowCore 的源码,苦于代码量巨大,就想将项目回退到 Init Commit 版本 但是在回退版本后,工程内Project 显示已卸载 重新加载后 提示: 不支持 Th ...

  5. SpringBoot+hutool工具-数据库数据导出Excel

    hutool文档地址:https://www.hutool.cn/docs/#/ 导入依赖 <dependency> <groupId>cn.hutool</groupI ...

  6. layui文件上传

    //前端代码 <div class="layui-form-item"> <label class="layui-form-label"> ...

  7. 解决linux mint内置无线网卡失效问题

    前言 同学安装了linux mint,但是内置的无线网卡失效,只能通过有线网卡连接,经过查询得到不是缺少驱动的问题,是内核不支持 解决办法 sudo apt install linux-generic ...

  8. x=x+=x-=x-x;

    int x=10; x=x+=x-=x-x; // x=x+(x-(x-x)) System.out.println(x); 输出结果20

  9. python-函数的参数与返回值

    Python函数 4.1.函数初识 在编写程序的过程中,有某一功能代码块出现多次,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小模块,这就是函数 就是一系列Python语 ...

  10. Servlet面试题合集

    servlet的生命周期 在创建servlet对象时,通过调用.init()方法进行初始化 通过service()方法来接收客户端的请求.根据请求方式的不同转发给对应的doGet()或doPost() ...