自定义组件中的事件

源码

list.vue

<template>
    <view class="list" @click="onClick">
        <text>{{name}}</text>
    </view>
</template>
<script>
    export default {
        props:{
           name:{
               type:String,
               defaule:""
           }
        },
        data() {
            return {
            };
        },
        methods:{
            onClick:function(){
                //自定义组件内调用 使用组件页面的 方法
                this.$emit('onClick',this.name);
                console.log("组件内容被点击"+this.name);
            }
        }
    }
</script>
<style>
.list{
    height: 50px;
    line-height: 50px;
    border-bottom: 1px #F0AD4E solid;
    padding-left:15px ;
}
</style>

index.vue

<template>
    <view >
    <list name="uni-app" @onClick="onClick"></list>
    <list name="js" @onClick="onClick"></list>
    <list name="html"></list>
    </view>
</template>
<script>
    /*
    自定义组件使用部长
    1. 项目根目录创建 components目录
    2. 创建组件
    3. 引入组件
    4. 注册组件
    5. 传参
    6. 事件通讯
    */
    //引入组件
    import list from '@/components/list.vue'
    export default {
        //注册组件
        components:{
            list
        },
        data() {
            return {
            }
        },
        methods: {
            onClick:function(e){
                console.log("调用自定义组件的页面");
                console.log(e);
            }
        }
    }
</script>
<style>
</style>

官网组件