父組件向子組件傳值用props
使用：
1.js里import引入子組件:
import cpn from '子組件路徑' 2.js的components添加上cpn components: { cnp }, 3.頁面使用： <cpn></cpn>
1.父組件（向子組件傳值：）
<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>
2.子組件頁面接收：
<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
}
}
補充，當傳過去的值需要駝峰命名時：
父：
<cpn :c-movies="movies" :c-msg="msg" />
子：
props: {
cMovies: {
type: Array,,
default() {
return []
}
},
cMsg: {
type: String,
default:'接收數據時給定一個默認值'
}
},