VUE3 之组件传参

目录1. 概述2. 组件传参3. 综述4. 个人公众号1. 概述韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的组件传参。2. 组件传参2.1 初识组件传参<body

追风人聊Java

5147人浏览 · 2022-01-21 09:18:55

追风人聊Java · 2022-01-21 09:18:55 发布

1. 概述

韦奇定律告诉我们：大部分人都很容易被别人的话所左右，从而开始动摇、怀疑，最终迷失自我。因此我们要努力的坚定信念，相信自己，才不会被周围的环境所左右，才能取得最终的胜利。

言归正传，之前我们聊了组件的概念，既然有多个组件，那自然存在组件间传参的问题，今天我们就来聊聊 VUE 的组件传参。

2. 组件传参

2.1 初识组件传参

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        template:`
            <div>
                <test content="hello" />
            </div>
        `
    });
    app.component("test", {
        props:['content'],
        template:`
            <div>{{content}}</div>
        `
    });
      const vm = app.mount("#myDiv");

从例子中可以看出，我们在主组件的 test 组件中增加了属性 content，并在 test 组件中使用 props 接收了 content 属性，然后在 template 中使用

2.2 组件参数绑定数据

    const app = Vue.createApp({
        data() {
            return {
                num: 123
            }
        },
        template:`
            <div>
                <test :content="num" />
            </div>
        `
    });

    app.component("test", {
        props:['content'],
        template:`
            <div>{{content}}</div>
        `
    });

这个例子中，我们稍微改进了一下，组件的属性不再是写死的，而是使用我们之前学的绑定知识，使用 :content="num"，与数据中的 num 绑定

2.3 向组件中传多个参数

    const app = Vue.createApp({
        data() {
            return {
                num1: 123,
                num2: 456,
                num3: 789
            }
        },
        template:`
            <div>
                <test :num1="num1" :num2="num2" :num3="num3" />
            </div>
        `
    });

    app.component("test", {
        props:['num1', 'num2', 'num3'],
        template:`
            <div>{{num1}}</div>
            <div>{{num2}}</div>
            <div>{{num3}}</div>
        `
    });

同理，在组件 test 的标签中多写一些属性，num1、num2、num3，然后在 test 组件中使用 props 接收这些参数

似乎没有什么问题，但如果需要传的参数很多，就有点不优雅了

2.4 向组件中传多个参数-改进版1

    const app = Vue.createApp({
        data() {
            return {
                params : {
                    num1: 123,
                    num2: 456,
                    num3: 789
                }
            }
        },
        template:`
            <div>
                <test v-bind="params" />
            </div>
        `
    });

    app.component("test", {
        props:['num1', 'num2', 'num3'],
        template:`
            <div>{{num1}}</div>
            <div>{{num2}}</div>
            <div>{{num3}}</div>
        `
    });

这个例子，把 num1、num2、num3 封装到了 params 这个对象中，然后使用 v-bind="params"，将整个对象传给组件，组件接收的方式不变，比之前优雅很多

2.5 向组件中传多个参数-改进版2

    const app = Vue.createApp({
        data() {
            return {
                params : {
                    num1: 123,
                    num2: 456,
                    num3: 789
                }
            }
        },
        template:`
            <div>
                <test :params="params" />
            </div>
        `
    });

    app.component("test", {
        props:['params'],
        template:`
            <div>{{params.num1}}</div>
            <div>{{params.num2}}</div>
            <div>{{params.num3}}</div>
        `
    });

这个例子较上个例子稍有不同，主组件使用对象的方式传递 :params="params"，test 子组件也使用对象的方式接收 props:['params']，使用时使用 params.num1 的方式

这种方式较上一种方式，感觉更符合一般的编程习惯，根据个人喜好使用吧

2.6 参数的名称由多个单词组成

    const app = Vue.createApp({
        data() {
            return {
                num: 123
            }
        },
        template:`
            <div>
                <test :num-a="num" />
            </div>
        `
    });

    app.component("test", {
        props:['numA'],
        template:`
            <div>{{numA}}</div>
        `
    });

当参数的名称由多个单词组成，官方的建议是，在组件标签中使用小写 + ‘-’ 的方式命名，例如：num-a

但在子组件接收时，要使用驼峰命名法接收，例如：numA

哈哈，有点坑哦，要是写成 props:['num-a'] 是接收不到参数的

2.7 参数的计算（错误案例）

    const app = Vue.createApp({
        data() {
            return {
                num: 10
            }
        },
        template:`
            <div>
                <test :num="num" />
            </div>
        `
    });

    app.component("test", {
        props:['num'],
        template:`
            <div>{{num}}</div>
            <button @click="num = num + 1">num 加 1</button>
        `
    });

这个例子，我们接收到参数后，在子组件中将其自增

很不幸，自增没有成功，提示错误，大概意思是：这个参数是只读滴，不能修改 :(

那怎么办呢，看下面的例子

2.8 参数的计算（成功案例）

    app.component("test", {
        props:['num'],
        data() {
            return {
                myNum : this.num
            }
        },
        template:`
            <div>{{myNum}}</div>
            <button @click="myNum = myNum + 1">num 加 1</button>
        `
    });

上一个例子告诉我们，父组件传过来的参数，到了子组件都是只读的，不能改变

因此我们换一个思路，我们在子组件中建一个自己的数据 myNum，然后把父组件传过来的数据作为初始值，然后去自增子组件的 myNum 数据

很明显是可以的

3. 综述

今天聊了一下 VUE3 的组件传参，希望可以对大家的工作有所帮助，下一节我们继续讲组件的相关知识，敬请期待

欢迎帮忙点赞、评论、转发、加关注：）

关注追风人聊Java，每天更新Java干货。

4. 个人公众号

追风人聊Java，欢迎大家关注

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^