位置:首页 > web前端 > vue

vue父组件向子组件传值的方法_接收数据校验

dearweb 发布:2021-08-08 14:19:34阅读:

上一篇文章给大家说了一下子向父传值发方法,下面给大家讲解一下vue中父向子传值的方式,子组件主要是通过props的方式进行接收父组件传过来的值。

模板代码

<div id="app">
     <cpn :cmessage="message" :cmoves="moves" ></cpn>
</div>
<template id="cpn">
   <div>
       <h2 v-for = 'item in cmoves'>{{item}}</h2>
       <div >{{cmessage}}</div>
   </div>
</template>

js代码

const cpn = {
            template: '#cpn',
            // props:['cmoves','cmessage'],
            props:{
                //传入对象
                //类型限制
                // Array,String
                // message:Array

                //第二种写法 校验数据
                cmessage:{
                    type:String,//类型
                    defulet:'我是子集通信',//默认值
                    required:true  //时候必须传值 
                },
                cmoves:{
                    type:Array,//类型
                    defulet:[],//默认值
                    required:true  //时候必须传值 
                }
            },
            data(){
                return {}
            }
        }
        const app = new Vue({
            el: "#app",
            data: {
                message:'你好啊',
                moves:['海贼王','速度与激情','战狼','包青天']
            },
            // 注册组件
            components: {
                cpn
            }
        })

数据的校验

props:{
                //传入对象
                //类型限制
                // Array,String
                // message:Array

                //校验数据
                cmessage:{
                    type:String,//类型
                    defulet:'我是子集通信',//默认值
                    required:true  //时候必须传值 
                },
                cmoves:{
                    type:Array,//类型
                    defulet:[],//默认值
                    required:true  //是否必须传值 
                }
            },

以上就是父向子传值的基本方法,不足之处还望大家批评指正,前端道路上我们一起进步。

24人点赞 返回栏目 提问 分享一波

小礼物走一波,支持作者

还没有人赞赏,支持一波吧

留言(问题紧急可添加微信 xxl18963067593) 评论仅代表网友个人 留言列表

暂无留言,快来抢沙发吧!

本刊热文
网友在读
手机扫码查看 手机扫码查看