vue父子组件之间的通讯

时间 2019-12-06

标签 vue 父子组件之间通讯繁體版

原文原文链接

vue父子组件之间的通讯

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

//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的实例使用，很蛋疼。this

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

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

//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.无直接关系组件之间的数据传递input

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

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

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

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