前端培训丁鹿学堂：vue组件传参之props使用入门

vue组件使用的使用

1. 创建 在vite项目的components文件夹下创建组件，以.vue 结尾
2. 在app.vue 组件中使用：
   1. 引入 importDbuttonfrom'./components/Dbutton.vue'
   2. 注册

components:{
Dbutton
}

3. 在template模板中使用

<template>
<Dbutton content="内容" />
</template>

vue组件传参之props传参

props用于父组件给子组件传参

1. 给子组件上添加要传递的属性 ，比如传递一个名称为content的属性

<Dbutton content="内容" />

2. 子组件通过和data平级的props接收,props可以是数组或对象，先学最简单的数组。数组中的content和父组件的保持一致

    export default {
        props:['content'],
        data(){
            return {
            }
        },
    }

3. 在子组件的模板上使用，和使用data中的对象一样的用法

<template>
    <div>
        {{content}}
    </div>
</template>

vue通过props传参之对象形式

之前我们说子组件通过props接收父组件的参数，可以是数组或者对象形式。 对象形式可以设置校验参数类型，默认值等，更为规范和严谨。写法如下

        props:{
            content:{
                type:String, 
                default:'缺省内容'
            }
        },

type可以是string，number，array，function等数据类型 注意：default可以写成函数形式，当type的值是引用类型的时候，default默认值必须是函数形式

props:{
    content:{
        type:String, 
        default(){
            return '缺省内容'
        }
    }
},