Vue 24 props
1 简介
props主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与data、el、ref是一个级别的配置项
2 一个简单示例
1)StudentComp.vue
<template>
<div>
<h1>{{stname}}</h1>
</div> </template> <script>
export default {
name:'StudentComp',
data(){
return {
stname:'学生' ,
}
}
}
</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的更多相关文章
- Vue中用props给data赋初始值遇到的问题解决
Vue中用props给data赋初始值遇到的问题解决 更新时间:2018年11月27日 10:09:14 作者:yuyongyu 我要评论 这篇文章主要介绍了Vue中用props给dat ...
- vue & watch props
vue & watch props bug OK watch: { // props // chatObj: () => { // // bug // log(`this.chatObj ...
- [转]Vue中用props给data赋初始值遇到的问题解决
原文地址:https://segmentfault.com/a/1190000017149162 2018-11-28更:文章发布后因为存在理解错误,经@Kim09AI同学提醒后做了调整,在此深表感谢 ...
- Vue computed props pass params
Vue computed props pass params vue 计算属性传参数 // 计算 spreaderAlias spreaderAlias () { console.log('this. ...
- vue & components & props & methods & callback
vue & components & props & methods & callback demo solution 1 & props & data ...
- vue & modal props & form data update bug
vue & modal props & form data update bug OK <div> <BindModal :dialogBindVisible=&qu ...
- vue之props父子组件之间的谈话
眨眼就来杭州两年了,时间真快. 我们今天来说说vue的一个api---->props 首先我们先看看一个例子,是我一个项目中写的. 看到这个:有木有一点懂了.要是没懂,继续往下看 这里我们用到了 ...
- vue的props和$attrs
过去我们在vue的父子组件传值的时候,我们先需要的子组件上用props注册一些属性: <template> <div> props:{{name}},{{age}} 或者 {{ ...
- vue学习--Props
Props: props用以从父组件接收数据: 使用: Vue.component('child',{ ...
- vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件 <template> <div id="app"> <div>详情内容</div> <button v-on:clic ...
随机推荐
- WCF实现大文件上传
一.文件服务接口 1.文件上传 2.文件传输(上传按钮) 3.文件传输停止 服务地址: 在客端添加服务器引用,从而实现客户端调用服务器的功能. 二.契约 服务契约[ServiceContract]:定 ...
- pytest文档82 - 用例收集钩子 pytest_collect_file 的使用
前言 pytest 提供了一个收集用例的钩子,在用例收集阶段,默认会查找test_*.py 文件或者 *_test.py文件. 如果我们想运行一个非python的文件,比如用yaml 文件写用例,那么 ...
- mindxdl---common--test_tools.go
// Copyright (c) 2021. Huawei Technologies Co., Ltd. All rights reserved.// Package common define co ...
- VS 新版本无法打开旧项目问题处理
问题 最近想阅读 WorkflowCore 的源码,苦于代码量巨大,就想将项目回退到 Init Commit 版本 但是在回退版本后,工程内Project 显示已卸载 重新加载后 提示: 不支持 Th ...
- SpringBoot+hutool工具-数据库数据导出Excel
hutool文档地址:https://www.hutool.cn/docs/#/ 导入依赖 <dependency> <groupId>cn.hutool</groupI ...
- layui文件上传
//前端代码 <div class="layui-form-item"> <label class="layui-form-label"> ...
- 解决linux mint内置无线网卡失效问题
前言 同学安装了linux mint,但是内置的无线网卡失效,只能通过有线网卡连接,经过查询得到不是缺少驱动的问题,是内核不支持 解决办法 sudo apt install linux-generic ...
- x=x+=x-=x-x;
int x=10; x=x+=x-=x-x; // x=x+(x-(x-x)) System.out.println(x); 输出结果20
- python-函数的参数与返回值
Python函数 4.1.函数初识 在编写程序的过程中,有某一功能代码块出现多次,但是为了提高编写的效率以及代码的重用,所以把具有独立功能的代码块组织为一个小模块,这就是函数 就是一系列Python语 ...
- Servlet面试题合集
servlet的生命周期 在创建servlet对象时,通过调用.init()方法进行初始化 通过service()方法来接收客户端的请求.根据请求方式的不同转发给对应的doGet()或doPost() ...