组件通信-父组件向子组件传递数据
2020-12-27 本文已影响0人
木羽木羽女口生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<cpn :cmovies="movies" :cmessage="message"></cpn>
</div>
<template id="cpn">
<div>
<h2>{{cmessage}}</h2>
<p>{{cmovies}}</p>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
//父传子
const cpn = {
template: `#cpn`,
//第一种写法，传入的是对应属性的名字
// props:['cmovies','cmessage'],
//第二种：传入的是一个对象
props: {
//1。指定你对应参数的类型
//cmovies:Array,
//cmessage:String,
//2. 提供一些默认值
cmessage: {
type: String,//属性类型
default: 'aaa',//默认值
required:true //要求必要参数
}
},
data() {
return {}
},
methods: {
}
}
const app = new Vue({
el: '#app',
data: {
message: 'HELLO',
movies: ['海王','海贼王','海尔兄弟']
},
components: {
cpn
}
})
</script>
</body>
</html>
