<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父组件向子组件传递信息</title>
</head>
<body>
<div id="app">
<cpn :cmovies='movies' v-bind:cmessage="message"></cpn>
</div>
<template id="cpn">
<div id="aaa">
<h1>{{cmessage}}</h1>
<p v-for="item in cmovies">{{item}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script type="text/javascript">
const cpn = {
template: '#cpn',
//父组件向子组件传递变量的三种方法：
//第一种 ：直接传数组，变量名要用引号引起来
// props:['cmessage', 'cmovies']
//第二种：传对象
props:{
//对象中的第一种方法：变量名加类型
cmovies: Array,
cmessage:String
//对象中的第二种方法：变量名加对象
// cmessage:{
// type: String,
// default: '123456789' ,//这是默认值的意思，如果不传变量值，变量就取这个值
// required: true // 这是说这个变量是必须要传的变量，如果不传就会报错
// },
// cmovies:{
// type:Array,
// // default: ['歌曲1', '歌曲2', '歌曲3'] //这种写法有些vue会报错，要写成函数类型
// default(){
// return ['歌曲1', '歌曲2', '歌曲3']
// }
// }
}
}
const app = new Vue({
el: '#app',
data:{
message: '我是父组件中的信息',
movies: ['两只蝴蝶', '茉莉花', '中国龙']
},
components:{
cpn
}
})
</script>
</body>
</html>
,
