vue组件传值
一、父组件给子组件传值
即父组件通过属性的方式向子组件传值,子组件通过 props 来接收。
父组件:
<template>
<child :text="text"></child>
</template>
<script>
import child from "./child.vue"
export default {
components: {
child},
data(){
return {
text:"我是父组件传递的值"}
}
}
</script>
子组件接收的父组件的值分为引用类型和普通类型两种
- 普通类型:字符串(String)、数字(Number)、布尔值(Boolean)、空(Null)
- 引用类型:数组(Array)、对象(Object)
普通类型子组件接收如下
子组件:
<template>
<div>{
{
text}}</div>
</template>
<script>
export default {
props:["text"]
或者:props:{
text:{
type: String, //类型(类型可以定义多个,例子:type: [String,Number])
default: "" //默认值
required:false //是否为必传项
}
}
}
</script>
引入类型子组件接收如下
<template>
<div>{
{
text}}</div>
</template>
<script>
export default {
props:["text"]
或者:props:{
text:{
type: Array,
default: function () {
return ['张三']
}
}
}
}
</script>
扩展各种的写法:
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 数组写法
propK: {
ty