<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <cpn v-bind:cMovies="movies" :cmessage="message"></cpn> -->
<cpn v-bind:c-movies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
//从app传过来的值
<p>{{cmovies}}</p>
<h2>{{cmessage}}</h2>
</div>
</template>
<script>
const cpn = {
template: '#cpn',
// props: ['cmovies', 'cmessage'],
props:{
//1.类型限值
//cmessage: String,
//cmovies: Array
//2、提供默认值以及必传值
cmessage:{
type: String,
default: 'aaa',
// required: true
},
//类型是对象或者数组时，默认值必须是一个函数
cmovies:{
type: Array,
// default: []
default() {
return []
}
}
},
data() {
return {}
}
}
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['海王', '海贼王', '海尔兄弟']
},
components: {
cpn
}
})
</script>
</body>
</html>
props中的驼峰标识
如movies传过去使用驼峰标识v-bind:cMovies=“movies”，将无法传递数据，需要将cMovies改成 c-movies才能使用驼峰标识
5956
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
