当先锋百科网

首页 1 2 3 4 5 6 7

前端vue的父模块给子模块相互发送消息与接收消息

消息传递：

  • 父传子：通过 props 向子组件传递数据
  • 子传父：通过 $emit 向父组件发送事件
  • 父调用子方法：通过子标签设置ref来调用子方法

例子：

子模块：

//1. 使用template嵌套
<template>
  <div @click="close">我是子模块,父模块传来了：{{parentValue}}</div>
  <div @click="sendData">点击我可以发送数据给父模块</div>
</template>
<script>
    export default {
        name: "childDiv",//2. 子模块名字，对应父模块的标签名
        data(){
            return{
                
            }
        }
        props:{
          //3. 这是父模块携带的数据，子模块不能直接改变值，两种任选一种
          parentValue:true,	//1
          parentValue{		//2
        		type: String
        		default: '默认值'
    		}
        },
      
        methods:{
          close(){
            this.$emit('closepop'); //4. 给父模块发送消息。
          },
          sendData(){
              this.$emit('sendMsg', 123);
          },
          receiveParent(val){	//10 接收父模块发来消息
              console.log("父模块发来了消息：" + val);
          }
        }
    }
</script>

父模块：

<body>
    <div @click="clickParent()">我是父模块</div>
    
    //7. 子模块标签，下面使用任意一个就行，推荐第2个，根据驼峰装换标签大写字母变为小写前面加-，例如“aBc-> a-bc”
    <childDiv>第一种写法</childDiv>
    // ref为父模块调用子模块方法时使用
    // :parentValue是传给子模块props里对应的值
    // @sendMsg与@closepop用于接收子模块调用$emit的事件
    <child-div ref="childModel" :parentValue='我是传给子模块的值' @sendMsg="getChildMsg" @closepop="getChildEmptyMsg" >第二种写法</child-div>
</body>
<script>
    //5. 导入子模块文件
    import childDiv from './child.vue'
    
    export default {
        
        data(){
            
        }
        //6. 引入子模块
        components: {
          childDiv,
          ...
        },
        methods:{
            //8. 接收子模块数据
            getChildMsg(msg){
                console.log("这是子模块发来的消息：" + msg);
            },
            getChildEmptyMsg(){
                console.log("这是子模块发来的空消息");
            },
            //9. 父模块调用子模块的方法
            clickParent(){
              this.$refs.childModel.receiveParent(‘哈哈哈哈’)  
            }
        }
    }
</script>