脚本宝典收集整理的这篇文章主要介绍了

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群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过