vue子组件向父组件传值

Posted 2021-03-08 hjk1124

要弄懂子组件如何向父组件传值，需要理清步骤

 子组件向父组件传值的步骤

　　一：子组件在组件标签上通过绑定事件的方式向父组件发射数据

　　　　

　　<!--html-->
<template id="ccp">
      <div>
        <button v-for=‘item of options‘ @click = ‘sonclick(item)‘>
        {{item.name}}        
        </button>
      </div>
  </template>                

　　

 // 子组件的methods项目下
                sonclick(item) {
                    console.log(‘我向父组件发射了一个事件‘, item.name);
                    this.$emit(‘getson‘, item) // 子组件向发射事件, 
                        //参数1:规定必须父组件使用的事件类型,
                        // 参数2: 向父组件发射的数据

                }

　　　说明：

　　　　1：在子组件上绑定事件，在子组件的methods上定义这个函数

　　　　2：在这个函数内部使用 this.$emit方法用于向父组件发射数据

　　　　3： 参数1：要求父组件自定义的事件；参数2：要向父组件发射的数据内容

　　二：父组件接收子组件发射的数据

　　　　

<!-- vue实例下 -->
    <div id="app">
        <cpn @getson=‘times‘></cpn>      
    </div>

　　父组件使用v-on + 子组件的规定的事件名绑定一个函数来操作从子组件传递过来的数据   @getSonFnName = ‘‘xxx‘‘

 // vue实例的methods下
                times(item) {
                    console.log(item.id)
                }

 　　说明：

　　　　1：父组件通过子组件规定的事件名来创建一个函数，并接收子组件传递的数据

　　　　2：在父组件定义的函数内部可以处理子组件的数据

　　　　3：由于子组件没有浏览器对象，所以定义函数时不用加参数，默认就是子组件传递的数据

　　　　4：v-on用于在父组件绑定子组件规定的事件类型，因而v-on也可以绑定自定义事件

 这样，就理解了vue子组件向父组件传值的过程。

以上。