Vue通过props实现父组件与子组件之间的通信(父组件传数据给子组件)

朴灿烈づ我的快乐病毒、 2023-01-06 15:55 198阅读 0赞

### Vue父组件传数据给子组件 ###

*  1.通过props关键词实现父组件传给子组件
 *   *  1.1在子组件中通过props关键词定义变量
     *  1.2通过自己定义的子组件标签和v-bind进行数据绑定
     *  1.3完整例子源码
     *  1.4测试

# 1.通过props关键词实现父组件传给子组件 #

## 1.1在子组件中通过props关键词定义变量 ##

通过props关键词对将要进行数据传输的的变量进行定义。

const cpn1={ 
                template:"#cddd",
                props:{ 
                    cmessage:{ 
                        type:String
                    },
                    cmessageshu:{ 
                        type:Array
                    }
                },
                data(){ 
                    return { }
                }
            }

## 1.2通过自己定义的子组件标签和v-bind进行数据绑定 ##

<cpn1 :cmessage="message" :cmessageshu="messageshu"></cpn1>
    //冒号后面的是子组件的变量，然后冒号里面的为父组件里面的变量

## 1.3完整例子源码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <cpn1 :cmessage="message" :cmessageshu="messageshu"></cpn1>
        </div>
        <template id="cddd">
            <div>
                <ul>
                    <li v-for="item in cmessageshu">
                        { { item}}
                    </li>
                </ul>
                <p>{ { cmessage}}</p>
            </div>
        </template>
        
        <script src="D://VSCode/VueCdn文件/vue.js"></script>
        <script>
            const cpn1={ 
                template:"#cddd",
                props:{ 
                    cmessage:{ 
                        type:String
                    },
                    cmessageshu:{ 
                        type:Array
                    }
                },
                data(){ 
                    return { }
                }
            }
            const app=new Vue({    
                el:"#app",
                data:{ 
                    message:"我是父组件",
                    messageshu:['第一件事','第二件事','第三件事']
                },
                components:{ 
                    cpn1
                }
            })
        </script>
    </body>
    </html>

## 1.4测试 ##

![在这里插入图片描述][20210114231735625.png]

[20210114231735625.png]: /images/20221119/e5fb9a2c3c354fac89e6d84b73b4d785.png