Vue 组件(一)父组件向子组件传递数据

1、父组件通过props向子组件传递数据

组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。通常父组件的模板中包含子组件,父组件要正向地向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过 props 来实现的。

组件中,使用选项props来声明需要从父级接收的数据,props的值可以是两种:

(1)字符串数组

我们构造一个数组,接收一个来自父级的数据message,并把它在组件模板中渲染。示例代码如下:

<div id="app">
    <child-component message="来自父组件的内容"></child-component>
</div>
    Vue.component('child-component',{
            props:['message'],
            template: `<div>{{ message }}</div>`
        });

    new Vue({
           el:'#app'                
        })

渲染结果:
这里写图片描述

(2)对象

当props需要验证时就需要对象写法,一般当你的组件需要提供给别人使用时,都推荐进行数据验证。比如某个数据必须是数字类型,如果传入字符串,就会在控制台弹出警告。
以下是几个prop示例:

<script>
 Vue.component('my-component',{
                props:{
                    //必须是数字类型
                    propA: Number,

                    //必须是字符串或数字类型
                    propB: [String, Number],

                    //布尔值,如果没有定义,默认是true
                    propC: {
                        type:Boolean,
                        default:true
                    },

                    //数字,而且必须上传
                    propD: {
                        type: Number,
                        required:true
                    },

                    //自定义一个验证函数
                    propE: {
                        validator: function(value){
                            return value > 10;
                        }
                    },

                    //如果是数组或对象,默认必须是一个函数来返回
                    propF: {
                        type: Array,
                        default:function(){
                            return [];
                        }
                    }
                }
             });
    </script>

示例代码:

<div id="app">
    <!--由于HTML不区分大小写,所以当时用DOM模板时,驼峰命名的props名称(propA)要转为短横命名(prop-a)-->
    <my-component :prop-a="parentmessage"></my-component>
</div>
<script>
             Vue.component('my-component',{
                props:{
                    //必须是数字类型
                    propA: Number,
                },  
                template: `<div>{{ propA }}</div>`
             });

            new Vue({
                el:'#app',
                data:{
                    parentmessage:''
                }
            })
        </script>

运行结果:
这里写图片描述
输入数字之后:
这里写图片描述

2、单向数据流(改变prop)
业务中经常会遇到以下两种需要改变prop的情况:

(1)子组件将父组件传递进来的初始值保存起来,在自己作用域下随意使用和更改。—— 这种情况可以在组件data内声明一个数据,引用父组件的prop。

示例代码如下:

<div id="app">
<!--由于HTML不区分大小写,所以当时用DOM模板时,驼峰命名的initCount名称(propA)要转为短横命名(init-count)-->
    <my-component :init-count="1"></my-component>
</div>
<script>
    Vue.component('my-component',{
           props:['initCount'],
           data:function(){
                return{
                      count:this.initCount
                   }
            },  

           template: `<div>{{ count }}</div>`
             });

            new Vue({
                el:'#app',              
            })
        </script>

此时,就可以避免直接操作initCount了。

(2)prop作为需要被转变的原始值传入。——这种情况用计算属性就可以搞定了。

实例代码如下:

<div id="app">
            <my-component :width="100" :border="2" :height="30"></my-component>
        </div>
        <script>
             Vue.component('my-component',{
                props:['width','border','height'],              
                template: `<div :style="style">组件内容</div>`,

                //计算属性
                computed:{
                    style: function () {
                        return {
                            width: this.width + 'px',
                            border:this.border + 'px',
                            height:this.height + 'px'
                        }
                    }
                }
             });

            new Vue({
                el:'#app',

            })
        </script>
阅读更多
版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/miss_zxm/article/details/79963165
个人分类: Vue
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭