Vue 子组件向父组件传递信息 #

1.子组件通过自定义事件(emit Event)向父组件传递信息 2.传递步骤及方法

• 先在子组件中自定义一个方法

  <button type="button" name="button" @click="sendMsg">发送数据</button>
  //自定义了一个sendMsg的方法

<!-- more -->

• 在 methods 中注册该方法

  methods:{
  sendMsg(event){
    //两个参数,参数1:key  参数2: 数据
    this.$emit("sendmsg",this.msg);
   }
 }

注意传递时应为两个参数：参数 1 : key 参数 2 : 数据

• 在父组件中为 key 值定义绑定事件获取传递值

<Child @sendmsg="getMsg"/>
//此处的key为sendmsg,为其定义了一个getMsg事件

• 在父组件 methods 注册该方法

  methods:{
  getMsg(data){
    this.info = data;
  }
}
//  此时的data的值即为子组件传递的数据,在这里将它赋值给info

子父级组件信息传递的总结 #

往往子父级组件传递数据的用法是父组件向子组件传递了数据,在子组件中处理了数据之后,又将数据返回给父组件进行其他的处理.所以往往子父级组件传递数据是相互存在的.