zoukankan      html  css  js  c++  java
  • 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; // 接收
        });
    }

    搞定!

  • 相关阅读:
    IntelliJ IDEA 14.03 java 中文文本处理中的编码格式设置
    应聘感悟
    STL string分析
    CUDA SDK VolumeRender 分析 (1)
    BSP
    CUDA SDK VolumeRender 分析 (3)
    CUDA SDK VolumeRender 分析 (2)
    Windows软件发布时遇到的一些问题
    Ten Commandments of Egoless Programming (转载)
    复习下光照知识
  • 原文地址:https://www.cnblogs.com/gluncle/p/9535443.html
Copyright © 2011-2022 走看看