Vue.js学习笔记：props传递数据

心已赠人 2021-09-14 03:34 366阅读 0赞

# 一.传递数据 #

## 1.props 传入单数据 ##

就像 data 一样，prop 可以用在模板内,同样也可以在 vm 实例中像“this.message”这样使用

<template> <div id="app"> <h1>{ {title}}</h1> <child message="hello! Prop"></child> </div> </template> <script> import Vue from 'vue'; Vue.component('child', { // 声明 props props: ['message'], template: '<span>{ { message }}</span>' }) export default { name: 'app', data: function () { return { title: '使用 Prop 传递数据' } } } </script>

![20170825102042848][]

## 2.props 传入多个数据 ##

如果在父组件的模板类添加其他元素或者字符会有：

①在最前面加入—每个子组件渲染出来都会在其前面加上

②在最后面加入—每个子组件渲染出来都会在其后面加上

③在中间加入—他前面子组件后面加上，后面的子组件后面加上

（1）1种

<template> <div id="app"> <child msg="hello!"></child> <child nihao="hello1!"></child> <child nisha="hello2!"></child> </div> </template> <script> import Vue from 'vue'; Vue.component('child', { props: ['msg','nihao','nisha'], template: '<span>{ { msg }}{ {nihao}}{ {nisha}}</span>', }); export default { name: 'app', data: function () { return { } } } </script>

![20170825142606792][]

（2）2种

![20170825142824202][]

（3）3种

![20170825142947406][]

（4）4种

![20170825143503923][]

注意：camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', { 
     
      
     
      
      
       // camelCase in JavaScript
     
      
     
      
      
       props: ['myMessage'],
     
      
     
      
      
       template: '<span>{ { myMessage }}</span>'
     
      
     
      
      
       })

<child my-message="hello!"></child>

# 二.动态prop #

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

<template> <div id="app"> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div> </template> <script> import Vue from 'vue'; export default { name: 'app', data: function () { return { title: '使用 Prop 传递数据', parentMsg: 'Message from parent' } }, components: { child: { props: ['myMessage'], template: '<span>{ {myMessage}}</span>' } } } </script>

![20170825103832755][]

# 三.表达式计算，传递值 #

如果想传递一个实际的 number，需要使用 `v-bind`，从而让它的值被当作 JavaScript 表达式计算

<template> <div id="app"> <p>{ {tle1}}:<comp total="123+456"></comp></p> <p>{ {tle2}}<comp :total="123+456"></comp></p> </div> </template> <script> import Vue from 'vue'; Vue.component("comp", { props: ["total"], template: "<span>total: { {total}}</span>", }); export default { name: 'app', data: function () { return { tle1: '这里传递是字符串', tle2: '用了v-bind动态语法，传递值会通过js的表达式计算，得到个值：' } } } </script>

![20170825110244977][]

# 四.Prop类型绑定 #

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

# 五.prop验证 #

传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时，这很有用。

<template> <div id="app"> <div>name:{ {dr.name}}, age:{ {dr.age}}.<input v-model="telphone" /> </div> <br /><br /> <div> <span>vue自定义组件</span><br /> <child :msg_null="123+456" msg_string="adss" :msg_number="0" :msg_twoway.sync="telphone" :msg_validate="mobilephone" :msg_number2String="mobilephone" :msg_obj2json="dr" :msg_json2obj="drJson"></child> </div> </div> </template> <script> import Vue from 'vue'; Vue.component("child", { props: { msg_null: null,//基础类型检测("null"意思是任何类型都可以) msg_string: { //String类型，必须是定义过的，可以是空字符串"" type: String, required: true, }, msg_number: {//Number类型，默认值100 type: Number, default: 100, }, msg_obj: {//Object类型，返回值必须是js对象 type: Object, default: function() { return { name: "DarkRanger", age: "18", } } }, msg_twoway: { //指定这个prop为双向绑定,如果绑定类型不对将抛出一条警告 type: String, twoWay: true, }, msg_validate: { //自定义验证，必须是Number类型，验证规则：大于0 type: Number, validator: function(val) { return val > 0; } }, msg_number2string: { //将值转为String类型,在设置值之前转换值(1.0.12+) coerce: function(val) { return val + "" } }, msg_obj2json: { //js对象转JSON字符串 coerce: function(obj) { return JSON.stringify(obj); } }, msg_json2obj: {//JSON转js对象 coerce: function(val) { return JSON.parse(val); } }, }, template: '<div><b>msg_null=123+456=</b> { {msg_null}}</br> </br><b>msg_string="1":</b>{ {msg_string}}</br></br><b>msg_number:</b> { {msg_number}}</br> </br><b>msg_obj:</b>{ {"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</br> </br><b>msg_twoway:</b><input v-model="msg_twoway"></br></br><b>msg_validate:</b>{ {msg_validate}}</br> </br><b>msg_number2String:</b> { {msg_number2string}}</br></br><b>msg_obj2json:</b> { {msg_obj2json}}</br> </br><b>msg_json2obj:</b>{ {"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>' }); export default { name: 'app', data: function () { return { telphone: "0356-1234567", mobilephone: 15912345678, dr: { name: "DarkRanger", age: 25 }, drJson: {"name":"DarkRanger","age":25} } } } </script>

![20170828140846247][]

解释：

①、msg\_null：不论什么数据类型，只要能解析成功，就渲染成正确的html

②、msg\_string：只能传递String类型的字符串，如果将child06中的“msg\_string="this is string"”更改为“:msg\_string="1+2"”,

控制台报错：  
![954416-20160525173845538-481919227.png][]

③、msg\_number：如果在child06标签中没有定义值，我们将会取默认值100，现在定义了“:msg\_number="99"”，如果将“:msg\_number="99"”更改为“msg\_number="99"”，控制台报错：  
![954416-20160525174227116-1886236837.png][]

④、msg\_obj：在js中我们定义的msg\_obj的default属性是一个具有返回js对象的函数，这里取值的时候直接取的就是返回值，如果在child06中定义或者绑定了新的js对象，则会将msg\_obj更新为新的数据。取js对象属性值的时候用\{ \{Object.prop\}\}取值即可。

⑤、msg\_twoway：双向数据绑定，在测试的过程中发现，即使设置“twoWay: true”，当子组件发生变化时，vue实例的数据并不会更新，还是单向的数据绑定，这里我将child06中原先的“:msg\_twoway="telphone"”更改为“:msg\_twoway.sync="telphone"”，保证测试能够数据双向绑定。  
  
⑥、msg\_validate：有验证规则的组件数据，这里定义的规则是当前数值必须大于0，如果将child06中的“:msg\_validate="mobilephone"”更改为“:msg\_validate="-1"”。控制台报错：  
![954416-20160525175154897-2054626121.png][]

⑦、msg\_number2string：在结果赋值之前将数值转化为字符串。  
  
⑧、msg\_obj2json：vue.js内置了JSON的两个方法，一个是JSON.parse(jsonStr)--》将JSON字符串转化为js对象，另外一个是JSON.stringify(obj)--》将js对象序列化为JSON字符串。  
  
这里是将obj转化为json字符串，需要添加coerce属性，它是一个具有返回json字符串的函数，当然不是必须得用JSON.stringify(obj)方法，只要方法合理，能够转化为json能够识别的字符串即可。  
  
⑨、msg\_json2obj: 将json字符串转化为js对象。

[20170825102042848]: /images/20210813/6494e0e7288445889b2e0e4076c81130.png
[20170825142606792]: /images/20210813/b74b15ddd2ef4e71a115fdf136f6b84c.png
[20170825142824202]: /images/20210813/a79955a017f847b493bbd3267a2b03f7.png
[20170825142947406]: /images/20210813/38924a8c940643e59a2c10b33723f1fc.png
[20170825143503923]: /images/20210813/49b744dc0b28405eabc271e64f10b0af.png
[20170825103832755]: /images/20210813/9528dbad4f9742b6b45b07cc692ac82e.png
[20170825110244977]: /images/20210813/eff8c5e7c56141dbb643af52c68f583a.png
[20170828140846247]: /images/20210813/eb9fdcfd16784769a824109acef667a4.png
[954416-20160525173845538-481919227.png]: /images/20210813/78ad2f6106c949698f6f67aa45c9afd8.png
[954416-20160525174227116-1886236837.png]: /images/20210813/ba7f4ad9a55b4f1ba380cc66d5a0376a.png
[954416-20160525175154897-2054626121.png]: /images/20210813/fe7971e70c0a449ca3b008180c71e6e4.png