Vue父子组件数据传输（父—>子）：
1、创建子组件构造器
2、对子组件构造器进行注册
3、采用props方式对子组件实现数据传输
4、使用子组件，在子组件使用中采用v-bind绑定父组件数据，最终实现父组件向子组件传输数据
<body>
<div id = "app">
<!-- cnp中将父组件向子组件中传输 -->
<cnp :cmovies="movies" :cmessage="message"></cnp>
</div>
<!-- template 编写自己的模版 -->
<template id = "mytemp">
<div>
<h4> 这是魔戒系列电影</h4>
<p v-for = "m in cmovies">{{m}}</p>
<h4>{{cmessage}}</h4>
</div>
</template>
<script>
//创建子组件 #mytemp 创建组件构造器对象
//原始为Vue.extend(template:模版具体内容（如div等）)
//Vue.component("组件标签名",自定义的组件构造器) 此注册为全局变量
//以下为语法糖写法
const cnp = {
template:"#mytemp",
// 基础写法props: ["cmovies","cmessage"]
//标注数据格式 常用格式包括Array String Number Boolean Object Date Function
//props: {
// cmovies:Array,
// cmessage:String,
// }
props: {
cmovies:{
type:Array,
//default:[] 下面写法采用了工厂函数的形式，有的vue版本要求
default(){
return [];
},
requried:true
},
cmessage:{
type:String,
default:"初始化"
}
}
}
//创建父组件
const app = new Vue({
el:"#app",
//data 严格按照函数格式编写，是函数格式，则外部调用该data是新建一个对象
//多次调用该data，是建立不同对象，可以说相互之间解偶
data () {
return {
movies:["魔戒现身","双塔奇兵","王者归来"],
message:"以上为魔戒系列电影。"
}
},
//组件注册的语法糖
components: {
cnp
}
})
</script>
</body>
来源：https://www.cnblogs.com/xiaoguniang0204/p/12299416.html