vue父子组件通信（子传父-自定义事件）

3月

本文最后更新于2020年03月20日，已经过了1764天没有更新，若内容或图片失效，请留言反馈

props用于父组件向子组件传递数据，还有一些常见的时子组件传递数据或事件到父组件中。
在这种情况下，我们需要使用自定义事件来完成。

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据
v-on不仅仅可以用于监听ODM事件，也可以用于组件间的自定义事件。

自定义事件的流程

在子组件中通过$emit()来触发事件
父组件中通过v-on监听子组件事件

案列：

text 代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    
    <div id="app">
        <!-- 父组件通过v-on监听子组件的事件 -->
        <cpn @item-click="itemclick"></cpn>
        <h2>{{name}}</h2>
    </div>
    
    <template id="test">
        <div>
            <!-- 1.通过v-on监听按钮的点击事件btnclick -->
            <button type="button" v-for="item in categories" @click="btnclick(item)">{{item.name}}</button>
        </div>
    </template>
    
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        
        const cpn = {
            template:'#test',
            data(){
                return{
                    categories:[
                        {id:'1',name:'张三'},
                        {id:'2',name:'李四'},
                        {id:'3',name:'王五'},
                        {id:'4',name:'赵六'},
                    ]
                }
            },
            methods:{
                // 2.实现按钮点击事件
                btnclick(item){
                    //3.将事件发送和item发送给父组件，事件名不要使用驼峰命名法
                    this.$emit('item-click',item);
                }
            }
        }
        
        const app = new Vue({
            el:"#app",
            data:{
                name:""
            },
            
            components:{
                cpn
            },
            
            methods:{
                //获取子组件发送过来的事件 
                itemclick(item){
                    this.name = item.name;
                    console.log("s",item)
                }
            }
        })
    </script>
</body>
</html>

在案列中：
1.监听子组件按钮的点击事件

2.在子组件的methods中实现按钮点击事件的方法

text 代码:
methods:{
// 2.实现按钮点击事件
  btnclick(item){
//3.将事件发送和item发送给父组件
  this.$emit('itemclick',item);
  }
} 
在该方法中通过$emit()将事件传递给父组件，事件名为itemclick，参数为item。

3.父组件通过v-on监听子组件的事件

大致流程：

点击子组件按钮
触发按钮点击事件（btnclick）
按钮点击事件（btnclick）将itemclick事件传递给父组件
父组件通过v-on监听到了子组件的itemclick事件
触发父组件的cpnclick事件，cpnclick事件会修改父组件name

注意：通过$emit发送事件事件名不能使用驼峰命名法

不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用峰命名法。并且 v-on 事件监听器在
DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

推荐使用“-”分割的事件名 my-event

声明：本文由 yuan（博主）原创，依据 CC-BY-NC-SA 4.0 许可协议授权，转载请注明出处。

还没有人喜爱这篇文章呢