彻底弄懂父组件给子组件传值prop

最新推荐文章于 2025-03-22 07:30:00 发布

公子清

最新推荐文章于 2025-03-22 07:30:00 发布

阅读量1.3k

点赞数

分类专栏： js系列实践真题系列 Vue系列文章标签：组件通讯 vue传值父传子

本文链接：https://blog.youkuaiyun.com/Josiah_Yuan/article/details/106791085

版权

Vue系列同时被 3 个专栏收录

40 篇文章

订阅专栏

js系列

32 篇文章

订阅专栏

实践真题系列

25 篇文章

订阅专栏

本文详细探讨了如何在Vue中通过props属性从父组件向子组件传递数据，包括默认的字符串传递方式以及使用v-bind实现更精确的数据类型传递。同时，提到了可以通过设置ID、class、style等内置属性来传递信息，Vue会自动处理属性合并和覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件给子组件传值（投票）

局部组件实践和组件之间的嵌套：

父组件把信息传递给子组件：props属性传递

默认传递给子组件的属性值都是字符串格式的，如果需要传递数据的格式是数据本身应该具备的数据，我们需要基于v-bind实现传递（哪怕传递的属性值还是固定）
可以把子组件当做一个标签，我们可以设置ID、clsaa, style等内置属性值，这些属性也会传递给子组件，vue会帮我们处理好的，该合并的合并，该覆盖的覆盖，无需我们在props中注册处理`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .container {
            box-sizing: border-box;
            margin: 20px auto;
            padding: 0 10px;
            border: 1px solid #AAA;
            width: 300px;
        }

        .container h3 {
            font-size: 16px;
            line-height: 40px;
            border-bottom: 1px dashed #AAA;
            font-weight: bold;
        }
        .red {
            color: red !important;
        }
    </style>
</head>

<body>
    <!-- 局部组件实践和组件之间的嵌套：
         父组件把信息传递给子组件：props属性传递
         - 默认传递给子组件的属性值都是字符串格式的，如果需要传递数据的格式是数据本身应该具备的数据，我们需要基于v-bind实现传递（哪怕传递的属性值还是固定）
         - 可以把子组件当做一个标签，我们可以设置ID、clsaa, style等内置属性值，这些属性也会传递给子组件，vue会帮我们处理好的，该合并的合并，该覆盖的覆盖，无需我们在props中注册处理
     -->
    <div id="app">
        <my-vote title="今天你吃饭了吗？" :aaa="20" class="red" style="font-size:18px"></my-vote>
        <my-vote title="你见过李子柒吗？"></my-vote>
        <my-vote></my-vote>
    </div>

    <template id="MyVoteTemplate">
        <div class="container">
            <h3><span v-text='title'> </span>(<span>0</span>)</h3>
            <!-- {{DataIndex}} -->
            <vote-content></vote-content>
            <vote-button></vote-button>
        </div>
    </template>

    <template id="VoteContentTemplate">
        <div class="content">
            <p>支持人数：<span>0</span> </p>
            <p>反对人数：<span>0</span> </p>
            <p>支持率：<span>0%</span> </p>
        </div>
    </template>

    <template id="VoteButtonTemplate">
        <div class="footer">
            <button type="button" class="btn btn-primary">支持</button>
            <button type="button" class="btn btn-danger">反对</button>
        </div>
    </template>

    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>
        //=>注册组件
        //=>在组件中调取渲染使用
        const VoteContent = {
            template: '#VoteContentTemplate',
            data() {
                return {

                }
            }
        };
        const VoteButton = {
            template: '#VoteButtonTemplate',
            data() {
                return {

                }
            }
        };
        const MyVote = {
            template: '#MyVoteTemplate',
            //=>子组件设置props用来接收父组件基于属性传递进来的信息: 在props中注册的属性和data一样，会挂载在当前实例上 this.title/{{title}}
            //1.父组件传递的属性名是kebab-cese格式，子组件在注册时候应该按照camelCase/PasalCase格式来接收和使用：属性名传递的是大写的，其实也是按照小写的来传递，所以props中注册和使用的时候都按照小写的来处理即可
            //props :["title","aaa"],
            //2.注册属性的校验
            // props :{
            //   title:String,
            //   aaa:[Number,Array]
            // },
            props: {
                title: {
                    type: String,
                    //设置默认值，当 <my-vote></my-vote>中为空，设置默认default数据
                    default: '我是设定的属性默认值',
                },
                aaa: {
                    //=>数据格式
                    type: [Number, Array],
                    //=>是否为必传，TRUE必须传递
                    //required:true
                    //=>自定义验证规则  val传递的属性值，在函数中，根据自己的规则，返回true和false来验证传递的值是否符合规则
                    validator(val) {
                        return val >= 0;
                    }
                }
            },
            data() {
                return {}
            },
            components: {
                VoteContent,
                VoteButton
            },
            created() {
                console.log(typeof this.aaa);
            }
        };
        let vm = new Vue({
            el: '#app',
            components: {
                MyVote
            }
        })
    </script>
</body>

</html>