props：子组件通过props获取父组件v—bind绑定的数据。
父组件绑定数据（这里app为父组件）：
<div id="app">
<!--2.将父数据赋值给子数据，从右到左-->
<son :cmovies="movies" :cmessage="message"></son>
</div>
子组件获取父组件绑定的数据：
const son = {
template: '#son',
//1.在子props设置数据
//props 写法有多种
//数组方式
//props:['cmovies','cmessage'],
//对象方式 可以指定类型，或设置默认值
props:{
//指定类型
cmovies:Array,
//cmessage: String,
//可以设置各种参数 type 指定类型 default 默认值 required 是否必须
cmessage: {
type:String,
default: 'aaaa',
required: true
}
},
}
啪啪它：
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<template id="son">
<!--注意templa里只能包含一个根元素 或用v-if-->
<div>
<ul>
<li v-for="movie in cmovies">{{ movie }}</li>
</ul>
<p>{{ cmessage }}</p>
</div>
</template>
<div id="app">
<!--2.将父数据赋值给子数据，从右到左-->
<son :cmovies="movies" :cmessage="message"></son>
</div>
<hr>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//父传子 props
//子传父 $emit
//父传子
const son = {
template: '#son',
//1.在子props设置数据
//props 写法有多种
//数组方式
//props:['cmovies','cmessage'],
//对象方式 可以指定类型，或设置默认值
props:{
//指定类型
cmovies:Array,
//cmessage: String,
//可以设置各种参数 type 指定类型 default 默认值 required 是否必须
cmessage: {
type:String,
default: 'aaaa',
}
},
}
let app = new Vue({
el: '#app',
data: {
message: '你好！',
movies:['《史莱姆》','《re：0》','《虫师》']
},
components: {
//增强写法 son:son,
son
}
});
</script>
</body>
</html>
我是分割线
前台效果：
Title
- {{ movie }}
{{ cmessage }}