Vue组件选项props实例详解

前面的话

　　组件接受的选项大部分与Vue实例一样，而选项props是组件中非常重要的一个选项。在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props

静态props

　　组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，需要通过子组件的 props 选项

　　使用Prop传递数据包括静态和动态两种形式，下面先介绍静态props

　　子组件要显式地用 props 选项声明它期待获得的数据

var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}

　　静态Prop通过为子组件在父组件中的占位符添加特性的方式来达到传值的目的

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:['message']
}
var parentNode = {
 template: `
 <div class="parent">
 <child message="aaa"></child>
 <child message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

命名约定

　　对于props声明的属性来说，在父级HTML模板中，属性名需要使用中划线写法

var parentNode = {
 template: `
 <div class="parent">
 <child my-message="aaa"></child>
 <child my-message="bbb"></child>
 </div>`,
 components: {
 'child': childNode
 }
};

　　子级props属性声明时，使用小驼峰或者中划线写法都可以；而子级模板使用从父级传来的变量时，需要使用对应的小驼峰写法

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['my-message']
}

动态props

　　在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

var childNode = {
 template: '<div>{{myMessage}}</div>',
 props:['myMessage']
}
var parentNode = {
 template: `
 <div class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return {
 'data1':'aaa',
 'data2':'bbb'
 }
 }
};

传递数字

　　初学者常犯的一个错误是使用字面量语法传递数值

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
 <my-parent></my-parent>
</div>
<script>
var childNode = {
 template: '<div>{{myMessage}}的类型是{{type}}</div>',
 props:['myMessage'],
 computed:{
 type(){
 return typeof this.myMessage
 }
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <my-child my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'MyParent': parentNode
 }
})
</script>

　　因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作JS表达式计算

<!-- 传递实际的 number -->
<comp v-bind:some-prop="1"></comp>
var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="1"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 }
};

　　或者可以使用动态props，在data属性中设置对应的数字1

var parentNode = {
 template: `
 <div class="parent">
 <my-child :my-message="data"></my-child>
 </div>`,
 components: {
 'myChild': childNode
 },
 data(){
 return {
 'data': 1
 }
 }
};

props验证

　　可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue会发出警告。当组件给其他人使用时，这很有用

　　要指定验证规格，需要用对象的形式，而不能用字符串数组

Vue.component('example', {
 props: {
 // 基础类型检测 (`null` 意思是任何类型都可以)
 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 value > 10
 }
 }
 }
})

　　type 可以是下面原生构造器

String
Number
Boolean
Function
Object
Array
Symbol

　　type 也可以是一个自定义构造器函数，使用 instanceof 检测。

　　当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。props会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用

　　下面是一个简单例子，如果传入子组件的message不是数字，则抛出警告

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':Number
 }
}
var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg: '123'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

　　传入数字123时，则无警告提示。传入字符串'123'时，结果如下所示

　　将上面代码中，子组件的内容修改如下，可自定义验证函数，当函数返回为false时，则输出警告提示

var childNode = {
 template: '<div>{{message}}</div>',
 props:{
 'message':{
 validator: function (value) {
 return value > 10
 }
 }
 }
}

　　在父组件中传入msg值为1，由于小于10，则输出警告提示

var parentNode = {
 template: `
 <div class="parent">
 <child :message="msg"></child>
 </div>`,
 components: {
 'child': childNode
 },
 data(){
 return{
 msg:1
 }
 }
};

单向数据流

　　prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解

　　另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着不应该在子组件内部改变 prop。如果这么做了，Vue 会在控制台给出警告

　　下面是一个典型例子

<div id="example">
 <parent></parent>
</div>
<script>
var childNode = {
 template: `
 <div class="child">
 <div>
 <span>子组件数据</span>
 <input v-model="childMsg">
 </div>
 <p>{{childMsg}}</p>
 </div>
 `,
 props:['childMsg']
}
var parentNode = {
 template: `
 <div class="parent">
 <div>
 <span>父组件数据</span>
 <input v-model="msg">
 </div>
 <p>{{msg}}</p>
 <child :child-msg="msg"></child>
 </div>
 `,
 components: {
 'child': childNode
 },
 data(){
 return {
 'msg':'match'
 }
 }
};
// 创建根实例
new Vue({
 el: '#example',
 components: {
 'parent': parentNode
 }
})
</script>

　　父组件数据变化时，子组件数据会相应变化；而子组件数据变化时，父组件数据不变，并在控制台显示警告

　　修改prop中的数据，通常有以下两种原因

　　1、prop 作为初始值传入后，子组件想把它当作局部数据来用

　　2、prop 作为初始值传入，由子组件处理成其它数据输出

　　对于这两种情况，正确的应对方式是

　　1、定义一个局部变量，并用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

　　2、定义一个计算属性，处理 prop 的值并返回

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

　　[注意]JS中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态

总结

以上所述是小编给大家介绍的Vue组件选项props实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# Vue组件选项props  # vue  # 组件  # props  # Vue2实现组件props双向绑定  # vue父组件向子组件(props)传递数据的方法  # vue组件中使用props传递数据的实例详解  # 详解vue父子组件间传值(props)  # 详细聊聊vue中组件的props属性  # Vue.js组件使用props传递数据的方法  # Vue组件如何设置Props实例详解  # 是一个  # 会在  # 自定义  # 绑定  # 两种  # 抛出  # 小编  # 默认值  # 的是  # 这是  # 也不  # 也会  # 这意味着  # 在此  # 并在  # 而不  # 给大家  # 详细介绍  # 要让  # 因为它 

相关文章： 七夕网站制作视频,七夕大促活动怎么报名？  如何快速生成高效建站系统源代码？  建站主机选择指南：服务器配置与SEO优化实战技巧  北京网站制作的公司有哪些,北京白云观官方网站？  如何快速选择适合个人网站的云服务器配置？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  如何在阿里云服务器自主搭建网站？  PHP 500报错的快速解决方法  高性能网站服务器部署指南：稳定运行与安全配置优化方案  高端网站建设与定制开发一站式解决方案 中企动力  杭州银行网站设计制作流程,杭州银行怎么开通认证方式？  宿州网站制作公司兴策,安徽省低保查询网站？  如何在搬瓦工VPS快速搭建网站？  如何选购建站域名与空间？自助平台全解析  定制建站平台哪家好？企业官网搭建与快速建站方案推荐  制作ppt免费网站有哪些,有哪些比较好的ppt模板下载网站？  自助网站制作软件,个人如何自助建网站？  如何用PHP快速搭建CMS系统？  制作门户网站的参考文献在哪,小说网站怎么建立？  网站制作壁纸教程视频,电脑壁纸网站？  如何用y主机助手快速搭建网站？  Python lxml的etree和ElementTree有什么区别  建站之星代理费用多少？最新价格详情介绍  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  建站之星3.0如何解决常见操作问题？  再谈Python中的字符串与字符编码（推荐）  如何配置FTP站点权限与安全设置？  宝塔面板创建网站无法访问？如何快速排查修复？  代刷网站制作软件,别人代刷火车票靠谱吗？  如何在云虚拟主机上快速搭建个人网站？  建站VPS能否同时实现高效与安全翻墙？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  MySQL查询结果复制到新表的方法(更新、插入)  如何在Golang中引入测试模块_Golang测试包导入与使用实践  如何通过商城自助建站源码实现零基础高效建站？  如何在阿里云高效完成企业建站全流程？  ,怎么在广州志愿者网站注册？  如何高效完成自助建站业务培训？  建站10G流量真的够用吗？如何应对访问高峰？  西安市网站制作公司,哪个相亲网站比较好?西安比较好的相亲网站？  如何确保西部建站助手FTP传输的安全性？  建站之星如何防范黑客攻击与数据泄露？  制作电商网页,电商供应链怎么做？  建站org新手必看：2024最新搭建流程与模板选择技巧  如何选择CMS系统实现快速建站与SEO优化？  ,网站推广常用方法？  网站制作难吗安全吗,做一个网站需要多久时间？  如何解决ASP生成WAP建站中文乱码问题？  家具网站制作软件,家具厂怎么跑业务？  详解免费开源的DotNet二维码操作组件ThoughtWorks.QRCode（.NET组件介绍之四）