父组件向子组件传值用props
使用：
1.js里import引入子组件:
import cpn from ‘子组件路径‘ 2.js的components添加上cpn components: { cnp }, 3.页面使用： <cpn></cpn>
父组件（向子组件传值：）
<cpn :cmovies="movies" :cmsg="msg" />
<script>
import cpn from ‘子组件路径‘
export default {
name: ‘页面名‘,
components: {
cpn
},
data() {
return {
movies:[{id:‘001‘,lable:‘战狼‘}，{id:‘002‘,lable:‘红海行动‘}，{id:‘003‘,lable:‘绿巨人‘}，{id:‘004‘,lable:‘举起手来‘}],
msg:‘你好，这是要向组件传过去的数据‘
}
}
</script>
子组件页面接收：
<template>
<div> <div class="title">{{cmsg}}<div> <div> <ul> <li v-for="item in cmovies" :key="item.id"> {{ item.label }} </li> </ul> </div>
</div> </template>
<script>
export default {
name: ‘页面名‘,
// 接受父组件传递的值
props: {
cmovies: {
type: Array,,
default() {
return []
}
},
cmsg: {
type: String,
default:‘接收数据时给定一个默认值‘
}
},
}
</script>
父子组件上下红色部分对应
props接收传过来的值有三种接收方式：
第一种：直接接收
props：[‘cmovies‘]
第二种：指定类型
props：{
cmovies：Array,
cmsg:String
}
第三种：设定默认值和必须传——类型是对象或数组时，默认值必须是函数
props: {
cmovies: {
type: Array,,
default() {
return []
},
require:true
},
cmsg: {
type: String,
default:‘接收数据时给定一个默认值‘
}
},
验证都支持以下数据类型：String Number Boolean Array Object Date Function Symbol
当有自定义构造函数时，验证也支持自定义的类型
props:{
// 基础的类型检查（‘null’匹配任何类型）
propA:Number,
// 多个可能的类型
propsB: [String,Number],
// 必须的字符串
propC: {
type:String,
required:true
},
// 有默认值的数字
propD:{
type:Number,
default:100
},
// 有默认值的对象
propE:{
type:Object,
// 对象或数组默认值必须从一个工厂函数获取
default:function(){
return {message:‘hello‘}
}
},
// 自定义验证函数
propF:{
validator: function(value){
// 这个必须匹配下列字符串中的一个
return:[‘success‘,‘warning‘,‘danger‘],indexof(value) !== -1
}
}