VUE组件化开发初体验，为初学者解析组件传参基础知识

前言

在之前的文章中已经较为详细的介绍了一些关于vue路由的基础知识，本篇文章主要是关于vue中子父组件之间传值的关键点。原本想写在上一篇文章中，但考虑到对于初学者来说一次性理解这些或许有些困难，所以秉承着尽可能让小白也看懂的想法还是单独写一篇，以便更详细讲解，也方便初学者理解。

VUE路由初体验，为初学者解析路由基础知识（二） - 掘金 (juejin.cn)

VUE路由初体验，为初学者解析路由基础知识（一） - 掘金 (juejin.cn)

正文

父向子传参

整个传参过程，无论是父向子还是子向父，大致可分为两步：发出参数，接收参数，并且有多种方式，包括但不限于路由参数，查询参数，props传参以及v-bind绑定数据传参，这里我们主要讲解较为常用也是最简单的方法：v-bind

1. 父组件传递参数给子组件****

在父组件中，我们可以通过标签的方式使用组件，那么我们也就可以在标签中添加一个v-bind绑定元素从而使父组件中的参数传给子组件。我们以一个小demo解释一下

js 复制代码

<template>
    <div>
        <div class="head">
            <input type="text" name="" v-model="message">
            <button @click="submit">确定</button>
        </div>

        <List :lists="lists" :msg="message" />

    </div>
</template>
  
<script>
import List from "@/components/body1/List.vue";
export default {
    components: {
        List,

    },
    data() {
        return {
            lists: ['html', 'css'],
            message: 'hello'
        }
    },
    watch: {
        lists(newVal) {
            console.log(newVal);
        }
    },
    methods: {
        submit() {
            if (this.message) this.lists.push(this.message)
            this.message = ''
        },
        showLists() {
            console.log(typeof this.lists);
        }
    }
}
</script>
  
<style lang="css" scoped></style>

在这个demo中显示栏被我分出去作为一个组件，而输入栏以及提交按钮则作为父组件中的元素，期初我将text输入框中的内容通过v-modle双向绑定给了父组件中的message变量，当点击提交按钮时应该把message push进lists数组中去，随后在通过v-bind绑定传给下面的子组件。

2. 子组件接收参数****

在上面的例子中，我们已经完成了发出参数这一步，接下来只需要拿到父组件传过来的lists并利用v-for输出这些元素就可以完成一个十分简单的记事本的小demo了，这里我们需要一个新东西：props，其实props既可以作为数组也可以作为对象，在这里我们将它定义为一个数组，并将我们传过来的lists给他塞进去

js 复制代码

<template>
    <div class="body">
        <ul>
            <li v-for="(item, index) in lists" :key="index">{{ item }}</li>

        </ul>
    </div>
</template>

<script>
export default {
    props: ['lists', 'msg'],
    data() {
        return {
            // lists: ['a', 'b'],
            message: 'helli'
        }
    },
    methods: {

    }
}
</script>

<style lang="css" scoped></style>

在这里面的数据使用起来和data里面是一样的，我们可以利用vue指令去操作这里面的数据，例如我们在这里就可以利用v-for去将整个lists数组循环输出

子向父传参

子元素发出参数

还是刚刚那个记事本的小demo，这次我将输入框和提交按钮独立成一个Head组件，而父组件则是下面的列表。这样一来，当我们提交时就是将Head子组件里面的参数传给父组件了。其实并不难，最经典的就是使用$emit方法

js 复制代码

methods: {
        submit() {
            if (!this.message) return
            this.$emit('add', this.message)
            this.message = ''
        }
    }

这个方法接受两个参数，第一个是字符串，是自己定义的事件名称，第二个是绑定的参数，emit翻译过来就是'发散'的意思，所以你不妨理解为子组件发散了一个名为xxx（我这里命名为'add'）的事件，事件里面绑定了自己的message这个参数。

父元素接收参数

既然子组件发散出来了一个事件并且携带了我们需要的参数，那么我们只需要在父组件中订阅这个事件再拿到携带的参数最后进行处理不就美滋滋了吗？订阅方法如下

html 复制代码

<Head @add="handle" />

js 复制代码

 methods: {
        handle(val) {
            console.log(val);
            this.lists.push(val)
        }
    }

我们在使用组件标签时利用@符号订阅这个事件并设定在订阅事件发生后执行handle函数，随后在方法中写好handle函数即可，handle函数的形参就是我们在子组件发散事件时携带的参数。

总结

我们可以把父子组件之间的关系比作一个家庭。在这个家庭中，每个人都有自己的名字和角色，就像在 Vue 组件中每个组件都有自己的名称和作用。同时，这个家庭中的成员之间需要相互交流，分享信息和知识，就像在 Vue 组件中不同组件之间需要传递数据和信息。而在 Vue 中，我们通过路由的方式来管理不同的组件，并且通过路由参数来实现父子组件之间的参数传递。

接下来，我们可以把路由参数比作一个信件。当我们在父组件中使用组件时，就相当于写了一封信件，告诉子组件我们想要传递什么信息。这个信件中包含了许多信息，比如发送人、收件人、地址、时间等等。