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中的数据,通常有以下原因

  1. 组件内部需要修改props。
  2. 组件需要可以由外部在运行时动态控制,而非单纯初始化。
  3. 组件外部需要读取组件内的状态来进行处理

  [注意]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 传递数据的更多相关文章

  1. vue组件 Prop传递数据

    组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. prop 是单向绑定的:当父组件的属性变化时, ...

  2. Vue组件传递数据

    组件命名 1.字母全小写且必须包含一个连字符 my-componnect 2.使用 kebab-case(短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例 ...

  3. 组件之间使用Prop传递数据

    <div id="example"> <father></father> </div> <script src="h ...

  4. props传递数据

    一.传递数据 1.props 传入单数据 就像 data 一样,prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用 <template> <d ...

  5. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  6. vue组件详解(二)——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  7. vue组件-构成组件-父子组件相互传递数据

    组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...

  8. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  9. Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

    #使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div ...

随机推荐

  1. Step by step Dynamics CRM 2013安装

    原创地址:http://www.cnblogs.com/jfzhu/p/4008391.html 转载请注明出处   SQL Server可以与CRM装在同一台计算机上,也可安装在不同的计算机上.演示 ...

  2. CSS3新特性学习

    1.一些实用规范:盒子模型,列表模块,超链接方式,语言模块,背景和边框,文字特效,多栏布局: 2:新增的选择器selctor eg: 1) 子元素过滤伪类:div:first-child  (自动识别 ...

  3. CodeForces - 426B(对称图形)

    Sereja and Mirroring Time Limit: 1000MS   Memory Limit: 262144KB   64bit IO Format: %I64d & %I64 ...

  4. C语言中strdup函数使用方法

    头文件:#include <string.h> 定义函数:char * strdup(const char *s); 函数说明:strdup()会先用malloc()配置与参数s 字符串相 ...

  5. UVa11324 最大团 The Largest Clique-有向图强连通分量&amp;DP

    https://vjudge.net/problem/UVA-11324 给定一张有向图G,求一个节点数目最大的节点集,使得该集合中的任意两个节点u和v满足:要么u可以到达v,要么v可以到达u(u,v ...

  6. 要后台控制前台的的CSS样式,我们可以加入ASP.NET Literal 控件

    ASP.NET Literal 控件,用于在页面上显示文本.此文本是可编程的. 我用它来制作了 ) { this.LtdMemberPromotion7.Text = "<style ...

  7. Python学习笔记 (1) :python简介、工具、编码及基础运算

    学习背景: 精通一门编程语言并编写出自己喜欢的程序是我多年的梦想,一定要找时间实现.此时想起了高中时的我对编程的兴趣十分浓厚,父母给自己购买了学习机插卡式的,只能敲basic代码,同时学校有386计算 ...

  8. MSSQL数据批量插入优化详细

    序言 现在有一个需求是将10w条数据插入到MSSQL数据库中,表结构如下,你会怎么做,你感觉插入10W条数据插入到MSSQL如下的表中需要多久呢? 或者你的批量数据是如何插入的呢?我今天就此问题做个探 ...

  9. 关于QT中的音频通信问题

    今天给大家讲说一个新的东西,使用QT实现音频通信的功能,挺起来是不是很高大上啊,哈哈,实际上我们只是使用一些接口做一些简单的工作而已,并不是让你写一个传输协议和采集音频信息,好了,那我们就来说一说关于 ...

  10. 用grunt对css代码进行压缩

    1.先安装Node.js环境 Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器.Node.js的下载链接 安装完后进行验证 2.安装grunt及插件 通 ...