父子组件间以及兄弟间的通信

最新推荐文章于 2022-03-02 16:27:35 发布

棋炜的小宝贝

最新推荐文章于 2022-03-02 16:27:35 发布

阅读量355

点赞数

分类专栏： vue.js 组件间的通信问题文章标签： vue.js

本文链接：https://blog.csdn.net/XWen_ING/article/details/109533573

版权

vue.js 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

组件间的通信问题

1 篇文章 0 订阅

订阅专栏

如何进行父子组件间以及兄弟间的通信呢？

父子通信：通过props向子组件传递数据
子父通信：通过事件向父组件发送消息

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!--
        如何让子组件可以使用父组件里面的数据，
        父子通信；通过属性传递方式可以实现
    -->
    <!--rmb自己在子组件里面定义一个属性叫做 rmb 用于接收父组件传递的数据-->
    <div id="app">
        <son-component :rmb="money"></son-component>
        <!-- <child></child>
        <parent></parent> -->
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>


     //子组件
    Vue.component("son-component",{
        //在子组件中，使用props接收组件传递过来的数据
        props:['rmb'],
        template:`
            <div>
                <h2>组件通信-父子通信</h2>
                <p>{{ rmb }}</p>
            </div>
        `
    });
    
    var vm = new Vue({
        el:"#app",
        data:{
            // 父级属性
            money:1000
        },

    })
</script>
</html>

子组件通过使用自定义事件来完成向父组件传递数据。

自定义事件的流程：
在子组件中，通过$emit('事件名称','传递的参数')来触发事件。
在父组件中，通过v-on来监听子组件事件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <son-component :rmb="money" @myevent="eventHandler"></son-component>
       <p>{{message}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

      //子组件
      Vue.component("son-component",{
          //向父级传递的数据
        data(){
            return {
                'needMoney': 10000
            }
        },
        //监听子组件绑定的事件
        methods:{
            phoneToDad(){
                //子父通信是通过子组件使用$emit去触发父组件的内置事件
                this.$emit("myevent","dad收到son的信息：dad给我一点钱"+this.needMoney)
            }
        },
        //子组件模板
        template:`
            <div>
                <h2>组件通信-子父通信</h2>
                <button @click="phoneToDad">son call to dad</button>
            </div>
        `,
    
    });
    var vm = new Vue({
            el:"#app",
            data:{
                message:"" //用于接收子组件传递的数据
            },
            methods:{
                eventHandler(data){
                    // console.log(data);
                    this.message = data;
                }
            }

        })
</script>
</html>

兄弟通信

兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据eventBus
创建一个Vue的实例，让各个兄弟共用同一个事件机制。
主动发触发监听函数(传递数据方)，通过一个事件触发bus.$emit(方法名，传递的数据)。
被动方定义事件监听函数(接收数据方)，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟通信</title>
</head>
<body>
  <div id="app">
    <xiongda></xiongda>
    <xionger></xionger>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
1、 兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据eventBus
2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。
3、主动发触发监听函数(传递数据方)，通过一个事件触发bus.$emit(方法名，传递的数据)。
4、被动方定义事件监听函数(接收数据方)，
通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，
此时函数中的this已经发生了改变，可以使用箭头函数。
*/

    var EventBus = new Vue();
    //主动方(传递数据方)
    Vue.component('xiongda',{
        methods:{
            callMyLitterBrother(){
                // 触发监听函数
                EventBus.$emit("phone","熊二，今晚 2020年10月30日18:00:55 一起去揍一下光头强")
            }
        },
        template:`
            <div>
                <h2>熊大</h2>
                <button @click="callMyLitterBrother">打电话给熊二</button>
            </div>
        `,
    });

    //被动方(接收数据方)
    Vue.component('xionger',{

        data: function(){
          return {
              message: '', // 用于接收熊大传递的信息
          }
        },
        created(){
            // 定义事件监听函数
            EventBus.$on('phone', (data) => {
                console.log(data);
                this.message = data;
            })
        },
        template:`
            <div>
                <h2>熊二</h2>
                <p>接收熊大的信息：{{message}}</p>
            </div>
        `,
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: 'hi vuejs!',
        }
    });
</script>
</html>

棋炜的小宝贝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
父子组件间以及兄弟间的通信

如何进行父子组件间以及兄弟间的通信呢？父子通信：通过props向子组件传递数据子父通信：通过事件向父组件发送消息在组件中，使用选项props来声明需要从父级接收到的数据。props的值有两种方式：方式一：字符串数组，数组中的字符串就是传递时的名称。方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录