<!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>
直接上函数不逼逼