脚本宝典收集整理的这篇文章主要介绍了vue父子组件之间的通信，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

vue父子组件之间的通信

• 1.父组件向子组件传递数据

//parent.vue
template:
<child :mdzz="msg"></child>
js:
data(){
    return{
        msg:'我是父组件数据',
    }
}

//child.vue
template:
    <p>
        {{ mdzz }}
    </p>
js:
    data(){
        return{
        }
    },
    //方式一
    props: ['mdzz'],
    //方式二
    props: {
        mdzz: String //这里指定了字符串类型，如果类型不一致会警告
    },
    //方式三
    props: {
        mdzz: {
            type: String,
            default: '' 
        }
    },

vue-API : props说明
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

在子组件标签里定义mdzz属性并赋值msg，这样就传递到子组件了，子组件再通过props获取父组件带过来的数据，
可以写成对象属性或者数组再用propsdata传递给子组件，不需要像上面那样写，但是propsData仅限于new的实例使用，很蛋疼。

• 2.子组件向父组件传递数据
  子组件向父组件传递数据用$emit方法，

官网说明：触发当前实例上的事件。附加参数都会传给监听器回调。
这个监听器写在父组件上，这样，子组件传递数据的时候，父组件的监听到，然后获取传过来的子组件的数据。

//parent.vue
template:
<child @showbox="toshow"></child>
js:
methods:{
    toshow(msg) {
       this.msg2 = msg;
    },
}
//child.vue
template:
<input @click="open" type="button" value="按钮" />
js:
methods:{
    open() {
        this.$emit('showbox','我是子组件数据'); 
            //触发showbox方法，'我是子组件数据'为向父组件传递的数据
        }
}

首先触发子组件实例上的事件，然后通过$emit()传递参数，监听器和要传递的数据，监听器为绑定在父组件上的方法

参数：
    {string} event
    [...args]

参考API实例方法-事件

• 3.无直接关系组件之间的数据传递

let vm = new Vue(); //创建一个新实例
<div @click="ge"></div>
methods: {
    ge() {
        vm.$emit('blur','哈撒ki'); //触发事件
    }
}

<div></div>
created() {
  vm.$on('blur', (msg) => { 
        this.data = msg; // 接收数据
    });
}

道理跟子组件向父组件传递数据是一样的

以上言论若有不当或错误，欢迎指正~

脚本宝典总结

以上是脚本宝典为你收集整理的vue父子组件之间的通信全部内容，希望文章能够帮你解决vue父子组件之间的通信所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。