Vue子组件向父组件传参

子组件传参给父组件

1.在子组件data中定义要传给父组件的参数

  data () {
    return{
      msg1: '子组件传给父组件1',
      msg2: '子组件传给父组件2'
    };
  }

2.在子组件中中建一个按钮，给按钮绑定一个点击事件

这里使用了其他封装的内容，只使用vue如下所示：

  <div>
    <button @click="sendTofather">子组件按钮</button>
  </div>

3.(子组件)在该函数中使用$emit来触发一个自定义事件，并传递一个参数

  methods: {
    sendTofather () {
      var msg = {};
      msg.msg1 = this.msg1;
      msg.msg2 = this.msg2;
      this.$emit('msgFormSon', msg);//只能传一个参数或者集合
    }
  }

4.在父组件中调用子组件，并在components中注册

import zizuj2 from '../component/zizujian2';
export default {
  components: {
    zizuj2
  }
}

 

5.在父组件中引用子组件，在子组件标签上绑定对自定义事件的监听(msgFormSon不可以写为msg-formSon)

<zizuj2 @msgFormSon="dataFormSon"></zizuj2>

6.创建回调方法dataFormSon()，接收子组件传的参数

  methods: {
    dataFormSon(data) {
      //回调方法，接收子组件传的参数
      console.log(data);
      this.msg = data;
      alert(this.msg.msg2);
    }
  }

整理一遍流程：

1.在子组件data中定义要传给父组件的参数

2.在子组件中中建一个按钮，给按钮绑定一个点击事件

3.(子组件)在该函数中使用$emit来触发一个自定义事件，并传递一个参数

4.在父组件中调用子组件，并在components中注册

5.在父组件中引用子组件，在子组件标签上绑定对自定义事件的监听(msgFormSon不可以写为msg-formSon)

6.创建回调方法dataFormSon()，接收子组件传的参数