• Share on Google+
VUE组件:组件的数据传递(props)
2019-04-14 10:56:25
组件的数据传递
props的作用
使用props流程
①给组件添加props选项
②在调用组件时传入实际参数即可
③完整代码及效果
④使用props传递分析
使用props传递数据时的一些细节
①传参时名称格式的问题
②传递动态数据
③Vue2参数传递是单向数据流
在子组件中如何使用参数props
①参数原封不动的使用
②参数作为某种状态的初始值使用
③参数作为需要被转换的原始值使用
对传入参数props进行数据验证
①使用对象形式的props验证参数的基本方式
②在验证参数时允许为几种类型之一
③在验证参数时允许给定默认值
④对象和数组参数默认值需要用一个函数来返回
⑤在验证参数时可以要求某些参数必传
props的作用
能让组件如同我们所知的js函数一样,在被使用时能够接收参数,并根据参数有不同的展现
 
使用props流程
①给组件添加props选项
在自定义组件的内容配置对象里面给上一个props选项,他和template同级,如下:
 
Vue.component('props-message',{
    props:['message'],
    template:`<div>{{message}}</div>`
})
1
2
3
4
注意:
 
这个props选项的值为一个对象或者数组,有点类似于js函数的形参,规定了这个组件能够接收那些参数
然后这里要注意下:对于组件传参采取的是类似于对象传参,即传入的参数的名称要和props里面给定的名称一致,否则无法接收到任何参数
②在调用组件时传入实际参数即可
在调用组件的标签上,按照标签属性的写法即可传入参数到组件中
 
注意:传递的参数名称(属性名)应该包含在组件的props选项中的数组或者对象中,否则组件无法接收你的值
 
<div id="app">
        <props-message message='测试数据'></props-message>
</div>
1
2
3
③完整代码及效果
对于props中的参数,我们可以如同data里面的数据一样访问
 
<div id="app">
    <props-message message='测试数据'></props-message>
</div>
<script>
    Vue.component('props-message', {
        props: ['message'],
        template: `<div>这是一个自定义组件,父组件传给我的内容是:{{message}}</div>`
    })
    var vueApp = new Vue({
        el: '#app',
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
效果图
 
 
④使用props传递分析
我们写在props中的字段名,可以和调用data返回的中的数据形式一样,直接写名字进行调用。不过一个是来自父级,一个是来自本身
对于传递参数的数量没有限制,这意味着你可以传递任意个数的参数,只要写在props里面就可以了
props中的字段和data中的中的字段不允许相同,否则会直接报错
对于props,不要如同data一样直接修改(能够修改,但是控制台会报错),避免直接改变属性,因为当父组件重新呈现时,该值将被覆盖
使用props传递数据时的一些细节
①传参时名称格式的问题
由于html不区分大小写,当使用DOM网页模板时,写在props数组或对象中的参数名为驼峰命名时,在参数传递时应该用分隔符将组成驼峰的单词进行分开
 
比如在props中有驼峰命名参数myName, 那么在传参时就应该写成my-Name或者my-name(由于html不区分大小写,所以my-name==my-Name,但是最标准写法应该是全小写中杠线分割)
 
<div id="app">
    <props-message my-Message='测试数据'></props-message>
</div>
<script>
    Vue.component('props-message', {
        props: ['myMessage'],
        template: `<div>这是一个自定义组件,父组件传给我的内容是:{{myMessage}}</div>`
    })
    var vueApp = new Vue({
        el: '#app',
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
当然,如果是使用的template模板字符串,可以忽略此限制
--------------------- 
作者:BoomShaKa_S 
来源:CSDN 
原文:https://blog.csdn.net/weixin_41350225/article/details/89160007 
版权声明:本文为博主原创文章,转载请附上博文链接!
分享文章轻松赚奖金!
将连结分享文章给好友或是贴至论坛、社群网站上,只要有人点击你分享的文章连结,就可以赚点击奖金,最棒的是,你还有机会可以再赚到一笔可观的【成交奖金】
分享你的专属连结,让生活更美好!


热门分类