vue prop 传递数据
prop
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据,需要通过子组件的 props 选项
一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。
在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data
中的值一样。
使用Prop传递数据包括静态和动态两种形式。
1.静态props
//父组件
<template>
<div id="app">
<v-child info="message"></v-child>
</div>
</template>
<script>
import Child from './components/Child'
export default {
components:{
'v-child':Child
},
data(){
return{
message:''
}
}
}
</script>
//子组件
<template>
<div>{{info}}</div>
</template>
<script>
export default {
props:['info']
}
</script>
2.动态props
使用v-bind绑定要传递的数据。每当父组件的数据变化时,该变化也会传导给子组件。
<template>
<div id="app">
<div>父级:<input type="text" v-model="message"></div>
<v-child info="message"></v-child>
</div>
</template>
<script>
import Child from './components/Child'
export default {
components:{
'v-child':Child
},
data(){
return{
message:''
}
}
}
</script>
<template>
<div>{{info}}</div>
</template>
<script>
export default {
props:['info']
}
</script>
3.单向数据流
prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了,Vue 会在控制台给出警告
//父
<template>
<div id="app">
<div>父级:<input type="text" v-model="message"></div>
<v-child :info="message"></v-child>
</div>
</template>
<script>
import Child from './components/Child'
export default {
components:{
'v-child':Child
},
data(){
return{
message:''
}
}
}
</script>
//子
<template>
<div>子:<input type="text" v-model="info"></div>
</template>
<script>
export default {
props:['info']
}
</script>
控制台弹出警告
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.
4.实现组件属性的双向绑定方式
修改prop中的数据,通常有以下原因
- 组件内部需要修改props。
- 组件需要可以由外部在运行时动态控制,而非单纯初始化。
- 组件外部需要读取组件内的状态来进行处理
[注意]JS中对象和数组是引用类型,指向同一个内存空间,如果 prop 是一个对象或数组,在子组件内部改变它会影响父组件的状态
解决方式:
1. 在组件内的data对象中创建一个props属性的副本
2. 创建针对props属性的watch来同步组件外对props的修改
3. 创建针对props副本的watch,通知到组件外
5.prop验证
为组件的 prop 指定验证要求,例如你知道的这些类型。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。
props: {
// bookList: Array 正确的props传入的bookList类型是数组,但是下面定义的是对象
bookList: Object
},
当prop验证类型错误时,提示
prop 可验证的数据类型
String
Number
Boolean
Array
Object
Date
Function
Symbol
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
注意:vue props 设置的默认值和类型检查之类的只检测第一层,而里层的内容是不检测的
props: {
messageA: {
type: String,
required: true
},
// 上边的是可以的,而下边的是不可以的 下面的data是第一层,prop会检测类型为对象,第二次为type 类型为数组,prop不会检测第二层
messageB: {
data:{
type: Array,
default: 100
},
}
}
//父组件
<v-chapter :chapter-name="chapter_name"></v-chapter> data(){
return{
book_id:'',
chapter_name:[],
}
}, //子组件
export default {
name:'chapter',
props: {
chapterName: Array,
},
} //父组件使用chapter-name 子组件需要使用驼峰 chapterName
6.prop传递函数
vue prop 传递数据的更多相关文章
- vue组件 Prop传递数据
组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...
- Vue组件传递数据
组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...
- 组件之间使用Prop传递数据
<div id="example"> <father></father> </div> <script src="h ...
- props传递数据
一.传递数据 1.props 传入单数据 就像 data 一样,prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用 <template> <d ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- vue组件详解(二)——使用props传递数据
在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的. 一.基本用法 组件不仅仅 ...
- vue组件-构成组件-父子组件相互传递数据
组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...
- vue组件详解——使用props传递数据
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...
- Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)
#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...
随机推荐
- Win10 - MySQL-zip安装方法
Win10 - MySQL-zip安装方法 安装步骤 1.下载,到MySQL官网:https://dev.mysql.com/downloads/mysql/ 2.解压安装包 解压下载的安装包,放到你 ...
- no plugin found for prefix 'tomcat 7' in the current project and in the plugin groups的解决方法
解决方法一: 找到这个settings.xml文件,进行编辑,在pluginGroups标签下加入下面的配置 <pluginGroups><pluginGroup>org.ap ...
- CentOS 7.0安装
CentOS 7.0安装 本次通过虚拟机的方法安装CentOS 7.0操作系统,开启虚拟机后会出现以下界面 1.选择第一项,Install CentOS 7 (安装CentOS 7),进入下面的界面 ...
- windowsserver2016系统性能和功能对比介绍
一. 性能和可扩性 特征描述 Windows Server 2012/2012 R2 标准版和数据中心 Windows Server 2016 标准版和数据中心 物理内存(主机)支持 每个物理服 ...
- LeetCode算法题-Missing Number(Java实现-四种解法)
这是悦乐书的第200次更新,第209篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第65题(顺位题号是268).给定一个包含n个不同数字的数组,取自0,1,2,...,n ...
- CSS染色图标(图片)
之前一直以为用background引入的图标无法染色(非字体图标),现在才知道有黑科技可以用,就是利用drop-shadow. 代码示例 <!DOCTYPE html> <html& ...
- shell编程/字库裁剪(1)——想法
版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7679024.html 作者:窗户 Q ...
- 远程连接ubuntu的MongoDB遇到的坑
首先连接不上,先查看云服务器上的安全组是否添加了对应的端口 如果打开了,那么久查看MongoDB是否允许远程连接 # mongod.conf # for documentation of all op ...
- Fluentd初探 简介与安装
Fluentd是一个开源的数据收集器,专为处理数据流设计,有点像 syslogd ,但是使用JSON作为数据格式.它采用了插件式的架构,具有高可扩展性高可用性,同时还实现了高可靠的信息转发. 据分(Y ...
- selenium 使用
selenium selenium:可以让浏览器完成相关自动化的操作 环境安装: pip install selenium 编码流程: 导包 创建某一款浏览器对象 制定相关的行为动作 from sel ...