1-9 props

最新推荐文章于 2025-07-04 14:54:43 发布

原创最新推荐文章于 2025-07-04 14:54:43 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue props

本文详细介绍了Vue.js中单文件组件的构成及其内部工作原理，包括模板、脚本和样式三大部分。重点讲解了组件间的数据传递方法，如父组件通过props向子组件发送数据，以及子组件如何通过emitEvent向父组件发送信息。此外还探讨了prop验证的多种方式，确保数据传递的准确性。

一、单文件组件

(1)三个部分组成

1、Template

只能存在一个根元素

2、Script

3、Style

scoped：样式只在当前组件内生效

(2)子父级组件交互(通信)

父->子 :props

案例:

这个是父组件

<template>
    <div>
        Parent
        <Son title="传递数据" />
    </div>
</template>
<script>
import Son from "./son"
export default {
    name: "mc",
    data() {
        return {

        }
    },
    components: {
        Son
    }
}
</script>
<<style scoped>

</style>

这个是子组件

<template>
    <div>
        Child:{{title}}
    </div>
</template>
<script>
export default {
    name: "son",
    data() {
        return {

        }
    },
    props: ["title"]
}
</script>
<style scoped>

</style>

效果图：

动态props：

这是父组件

<template>
    <div>
        Parent
        <input type="text" v-model="lifemsg">
        <Son title="传递数据" :lifemsg="lifemsg"/>
    </div>
</template>
<script>
import Son from "./son"
export default {
    name: "mc",
    data() {
        return {
            lifemsg:""
        }
    },
    components: {
        Son
    }
}
</script>
<<style scoped>

</style>

这是子组件

<template>
    <div>
        Child:{{title}}-{{lifemsg}}
    </div>
</template>
<script>
export default {
    name: "son",
    data() {
        return {

        }
    },
    props: ["title","lifemsg"]
}
</script>
<style scoped>

</style>

子->父 :emit Event

在vue中，父子组件关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息，看看他们是怎么工作的。

数据传递类型限制(验证)

我们可以为组件的 prop 指定需求。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

数据类型验证

多数据类型验证

必选项

默认值

obj、arr数据类型的默认值

<template>
    <div>
        Parent
        <Son :title="msg" :lifemsg="lifemsg" :num="num" :objdata="myobj"/>
    </div>
</template>
<script>
import Son from "./son"
export default {
    name: "mc",
    data() {
        return {
            msg:"我是活的数据",
            lifemsg:"hello",
            num:10,
            myobj:{
                name:"frack",
                age:20
            }
        }
    },
    components: {
        Son
    }
}
</script>
<<style scoped>

</style>

<template>
    <div>
        Child:{{ title }}-{{lifemsg}}-{{num*2}}-{{objdata.name}}
    </div>
</template>
<script>
export default {
    name: "son",
    data() {
        return {

        }
    },
    props: {
        //多个可能的类型   
        title: [String, Number],
        //必填的字符串
        lifemsg: {
            type: String,
            required: true
        },
        //带有默认的数字
        num:{
            type:Number,
            default:5
        },
        //带有默认值的对象
        objdata: {
            type: Object,
            //对象或者数组一定会从一个工厂函数返回默认值
            default: function() {
                return {
                    name: "未知",
                    age: 10
                }
            }
        }
    }
}
</script>
<style scoped>

</style>

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。