vue2.0组件通信小总结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.父组件->子组件

父组件

<parent>
    <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>
data(){
    return {
        msg: [1,2,3]
    };
}

子组件(子组件通过props来接收数据:)

// 写法1：
props: ['childMsg']
// 写法2：
props: {
    childMsg: Array //这里指定了字符串类型，如果类型不一致会警告
}
// 写法3：
props: {
    childMsg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

2.子组件->父组件

方法一：

子组件：

<template>
    <div @click="up"></div>
</template>
methods: {
    up() {
        this.$emit('upup','hehe'); //主动触发upup方法，'hehe'为向父组件传递的数据
    }
}

父组件

<div>
    <child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
    change(msg) {
        this.msg = msg;
    }
}

方法二：

// 子组件内部：

比如bannerList组件为子组件：

      that.$emit('input', msg);

在引用子组件的地方

    <banner-list v-model="bannerListData" v-bind:say-child-update="msg"></banner-list>
...
  data () {
    return {
      bannerListData: null,
    }
  },

3.兄弟组件之间的通信

我们可以实例化一个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; // 接收
    });
}

如果要通过父组件调用子组件的方法，参考此文章 http://www.cnblogs.com/heshan1992/p/6905452.html

以上是 vue2.0组件通信小总结 的全部内容， 来源链接： utcz.com/z/379564.html

回到顶部