父组件向子组件传递数据
props 数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 没有v-bind会把 movies当字符串传递到下一层 -->
<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
{{cmovies}}
<h2>{{cmessage}}</h2>
</div>
</template>
<script src="./vue.js"></script>
<script>
// 父传子 props
const cpn = {
template :'#cpn',
props: ['cmovies','cmessage']
}
const app = new Vue({
el: '#app',
data : {
message : 'fff',
movies : ['dd','eee','aa']
},
components: {
cpn
}
})
</script>
</body>
</html>
类型限制 提供默认值
props: {
// // 1. 类型限制
// cmovies : Array,
// cmessage : String
// 2. 提供一种默认值 不传的时候显示
cmessage :{
type : String,
default : 'aaaa'
}
}
提供一种默认值 不传的时候显示
<cpn v-bind:cmovies="movies"></cpn>
类型是对象或者数组时,默认值必须是一个函数