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

一.传递数据

1.props 传入单数据

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

2.props 传入多个数据

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

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

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

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

（1）1种

（2）2种

  template: '小明，{{ msg }}{{nihao}}{{nisha}}',

（3）3种

template: '{{ msg }}{{nihao}}{{nisha}}小明',

（4）4种

 template: '

{{ msg }}小明      {{nihao}}      {{nisha}}小林

',

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

Vue.component('child', {

// camelCase in JavaScript

props: ['myMessage'],

template: '{{ myMessage }}'

})

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

二.动态prop

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

三.表达式计算，传递值

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

四.Prop类型绑定

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

五.prop验证

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

解释：

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

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

控制台报错：

③、msg_number：如果在child06标签中没有定义值，我们将会取默认值100，现在定义了“:msg_number="99"”，如果将“:msg_number="99"”更改为“msg_number="99"”，控制台报错：

④、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"”。控制台报错：

⑦、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对象。