Vue通过props实现父组件与子组件之间的通信(父组件传数据给子组件) 朴灿烈づ我的快乐病毒、 2023-01-06 15:55 153阅读 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
还没有评论,来说两句吧...