当前浏览器不支持canvas,请更换浏览器后再试

vue2.0 父子组件通信 兄弟组件通信

 

父组件是通过props属性给子组件通信的来看下代码:

父组件:

复制代码
复制代码
<parent>
    <child :child-com="content"></child> //注意这里用驼峰写法哦
</parent>

data(){
    return {
        content:'sichaoyun'
    };
}
复制代码
复制代码

子组件通过props来接受数据

第一种方法

props: ['childCom']

第二种方法

props: {
    childCom: String //这里指定了字符串类型,如果类型不一致会警告的哦
}

第三种方法

props: {
    childCom: {
        type: String,
        default: 'sichaoyun' 
    }
}

子组件与父组件通信

vue2.0只允许单向数据传递,我们通过出发事件来改变组件的数据,废话少说,上干货

子组件代码

复制代码
复制代码
<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox','the msg'); //触发showbox方法,'the msg'为向父组件传递的数据
    }
}
复制代码
复制代码

父组件

复制代码
复制代码
<child @showbox="toshow" :msg="msg"></child> //监听子组件触发的showbox事件,然后调用toshow方法

methods: {
    toshow(msg) {
        this.msg = msg;
    }
}
复制代码
复制代码

兄弟组件之间的通信

我们可以实例化一个vue实例,相当于一个第三方

let vm = new Vue(); //创建一个新实例

组件他哥

<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('blur','sichaoyun'); //触发事件
    }
}

组件小弟接受大哥命令

<div></div>
created() {
  vm.$on('blur', (arg) => { 
        this.test= arg; // 接收
    });
}

搞定!

posted @   高亮uncle  阅读(313)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示