vue---父组件和子组件的通信

最新推荐文章于 2024-04-20 07:28:58 发布

Listener-1379

最新推荐文章于 2024-04-20 07:28:58 发布

阅读量249

点赞数

分类专栏： Vue 文章标签： vue js javascript event vue.js

本文链接：https://blog.csdn.net/weixin_45965358/article/details/116086338

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章目录

一.父组件与子组件的定义
二.子组件接受父组件消息
三.子组件向父组件发送消息
四.开发与应用

一.父组件与子组件的定义

我们在前面的《vue—组件详解》简单介绍了一下父组件与子组件，下面我们在来详细介绍一下。
在这里插入图片描述

我们通过在父组件中使用components来说明我们的子组件，特别的，我们的Vue可以看作根组件。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <my-button></my-button>
</div>
<script type = "text/javascript">
    const tempSon = Vue.extend({
        template:
            `<h1>
                    Good Morning
            </h1>`
    })
    const tempFather = Vue.extend({
        template:
            `<div>
                <h1>Good Night</h1>
                <temp></temp>
            </div>
            `,
        components:{
            temp:tempSon
        }
    })
    const app = new Vue({
        el:"#app",
        data:{

        },
        components:{
          myButton:tempFather
        }
    })
</script>
</body>
</html>

二.子组件接受父组件消息

我们在子组件中设置一个叫props的属性，通过它来接收父组件传来的消息，此外，我们还通过v-bind:绑定我们的值，通过绑定，我们可以拿到父组件的值放到props属性中，这样就能实现父组件向子组件传值。举个简单的例子，我们拿快递的时候，商家会通过快递公司，将商品放到菜鸟裹裹，然后我们再从菜鸟裹裹中获取商品，而props的作用就相当于菜鸟裹裹。

在这里插入图片描述

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
<div id = "app">
    <cpn v-bind:qin1 = "fruits" v-bind:qin2 = "university"></cpn>
</div>
<template id = "cpn">
    <div>
        <h1>{{qin1}}</h1>
        <h2>{{qin2}}</h2>
    </div>
</template>
<script type = "text/javascript">
    const cpn = {
        template:'#cpn',
        props:['qin1','qin2'],
        data() {
            return {}
        },
    }
    const app = new Vue({
        el:"#app",
        data:{
            fruits:'apple',
            university:'qing',
        },
        components:{
            cpn
        }
    })
</script>
</body>
</html>

三.子组件向父组件发送消息

我们也许会想到，能不能通过props向父组件发送消息呢，答案是否定的，我们vue中规定，props具有单向传递性。但是我们可以通过自定义事件，父组件监听子组件，从而获得子组件的消息。
在这里插入图片描述

在这里插入图片描述

说明：

1.首先当在屏幕上点击按钮（也就是触发子组件的click事件），就开时执行btnClick事件，emit是发射的意思，也就是将事件和消息发射出去(触发item-click事件)。

2.通过触发item-click事件，而父组件通过@item-click监听到了事件，进而去执行cpnClick事件。

3.vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

(官方对$emit的解释为：触发当前实例上的事件。附加参数都会传给监听器回调。)
我自己的理解为触发event事件后，传递arg给父组件，父组件通过@event监听传过来的参数并且接收。

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../../js/vue.js"></script>
</head>
<body>
    <div id = "app">
        <cpn @item-click="cpnClick"></cpn>
    </div>
    <template id = "cpn1">
        <div>
            <button v-for="item in myList" @click="btnClick(item)">
                {{item.name}}
            </button>
        </div>
    </template>
    <script type = "Text/javascript">
        const cpn = {
            template:"#cpn1",
            data:function() {
                return{
                    myList:[
                        {id : "aaa", name : "apple"},
                        {id : "bbb", name : "banana"},
                        {id : "ccc", name : "watermelon"},
                    ]
                }
            },
        methods:{
            btnClick(item){
                this.$emit('item-click', item)
            }
          }
        }


        const app = new Vue({
            el:"#app",
            data:{
                message:'Hello'
            },
            methods:{
                cpnClick(item){
                    console.log('cpnClick', item);
                }
            },
            components:{
                cpn
            }
        })
    </script>
</body>
</html>

四.开发与应用

我们在开发过程中，会划分许多的模块，也就是不同的组件，它们之间需要进行通信，比如下面的京东页面，当我们点击子组件的不同按钮时，父组件会发生不同的变化，当我们点击父组件时，子组件也会发生改变。在这里插入图片描述

Listener-1379

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vue---父组件和子组件的通信

文章目录一.父组件与子组件的定义二.子组件接受父组件消息三.子组件向父组件发送消息一.父组件与子组件的定义我们在前面的《vue—组件详解》简单介绍了一下父组件与子组件，下面我们在来详细介绍一下。我们通过在父组件中使用components来说明我们的子组件，特别的，我们的Vue可以看作根组件。源码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti
复制链接

扫一扫