<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="../JS/vue.js"></script> <body> <!--父亲组件--> <div id="app"> <cpn v-bind:arg1="messagqe" :arg2="movies"></cpn> </div> <!--父亲组件--> <!--组件--> <template id="cpn"> <div > <!-- 上面的div一定要加的一定要有个父级元素才能显示--> {{arg1}} {{arg2}} <ul> <li v-for="item in arg2">{{item}}</li> </ul> </div> </template> <!--组件--> <script> //父传子使用props const cpn={ template:"#cpn", //第一种 props:["arg1","arg2"], //第二种 props:{arg1:String,arg2:Array}, props:{ arg1:{type:String,default:"默认值1",required:true},//true是需要参数 arg2:{type:Object,default:"默认值2",required:true} }, data()//必须以函数xingshi { return{}; } } const app =new Vue({ el:"#app", //挂载那个元素 data:{ messagqe:"胡鸡鸡", movies:["qq","www","aiai","saosao"]}, components:{ cpn } }) </script> </body> </html>
直接上函数不逼逼
原文地址:https://www.cnblogs.com/xuexidememeda/p/12255540.html
时间: 2024-11-02 09:38:56