11：vue3 组件传递数据 Props（父传子）

1、父子组件通过Props传递数据，数据可以为固定数据，也可以多个数据，也可以动态数据

新建Parent.vue组件

<template>
    <h3>Parent</h3>
    <Child gd_title="Parent传固定数据" gd_title2="传递第二个参数" :dt_title="message"></Child>
</template>

<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            message:"传递动态参数"
        }
    },
    components:{
        Child
    }
}
</script>

新建Child.vue组件

<template>
    <h3>Child</h3>
    <p>{{ gd_title }}</p>
    <p>{{ gd_title2 }}</p>
    <p>{{ dt_title }}</p>
</template>

<script>
export default{
    data(){
        return{

        }
    },
    props:["gd_title","gd_title2","dt_title"]
}
</script>

App.vue引用Parent

<template>
<!-- 第三步：显示组件 -->
<Parent></Parent>
</template>

<script>
//第一步：引入组件
import Parent from './components/Parent.vue';
//第二步：注入组件
export default{
  components:{
    Parent
  }
}
</script>

注意事项：传递参数 只能父传子，不能子传父

2、组件传递多种数据类型

在上述的两个例子中，我们只传入了字符串值，但实际上任何类型的值都可以作为 props 的值被传递。

Number

<!-- 虽然 `20` 是个常量，但是我们还是需要使用 v-bind ，因为这是一个 JavaScript 表达式而不是一个字符串 -->，所以采用动态绑定才可

Boolean

同Number一样，也是需要使用 v-bind赋值

Parent.vue 代码

<template>
    <h3>----------Parent---------</h3>
    <Child gd_title="我是固定的String" :dt_title="message" :age="age"
    :isPublished="isPublished" :names="names" :userInfo="userInfo"></Child>
</template>

<script>
import Child from './Child.vue';
export default{
    data(){
        return{
            //动态传String
            message:"传递动态参数",
            //动态传Number
            age:20,
            //动态传Boolean
            isPublished:true,
            //Array
            names:["iwen","ime","frank"],
            //Object
            userInfo:{
                name:"Tom",
                age:24
            }   
        }
    },
    components:{
        Child
    }
}
</script>

Child.vue代码

<template>
    <h3>-------Child-----------</h3>
    <p>1、固定String：{{ gd_title }}</p>
    <p>2、动态String：{{ dt_title }}</p>
    <p>3、Number:{{ age }}</p>
    <p>4、Boolean:{{ isPublished }}</p>
    <p>5、数组Array：</p>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul>
    <p>6、对象Object：{{ userInfo.name }} -- {{ userInfo.age }}-->{{ userInfo }}</p>
</template>

<script>
export default{
    data(){
        return{

        }
    },
    props:["gd_title","dt_title","age","isPublished","names","userInfo"]
}
</script>

 

3、Prop 校验

在子组件接收参数时，加上接收的类型type

export default {
  props: {
    // 基础类型检查
    //（给出 `null` 和 `undefined` 值则会跳过任何类型检查）
    propA: Number,
    // 多种可能的类型
    propB: [String, Number],
    // 必传，且为 String 类型
    propC: {
      type: String,
      required: true
    },
    // Number 类型的默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象类型的默认值
    propE: {
      type: Object,
      // 对象或者数组应当用工厂函数返回。
      // 工厂函数会收到组件所接收的原始 props
      // 作为参数
      default(rawProps) {
        return { message: 'hello' }
      }
    },
    // 自定义类型校验函数
    propF: {
      validator(value) {
        // The value must match one of these strings
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 函数类型的默认值
    propG: {
      type: Function,
      // 不像对象或数组的默认，这不是一个
      // 工厂函数。这会是一个用来作为默认值的函数
      default() {
        return 'Default function'
      }
    }
  }
}

演示示例代码如下：

<script>
export default{
    data(){
        return{
        }
    },
   // props:["gd_title","dt_title","age","isPublished","names","userInfo"]
   props:{
    
    gd_title:String,
    dt_title:String,
    age:{
        type: Number,
        default:100
    },
    isPublished:Boolean,
    names:Array,
    userInfo:Object
    }
}
</script>