SOURCE

//1.Vue.extend创建组件
const cpnC = Vue.extend({
    template: "#cpn1",
    data: function () {
        return {
            students: [
                { id: "001", name: "关晓彤",imgUrl:"https://5b0988e595225.cdn.sohucs.com/images/20181224/ecf125cb199d4808a067f682c6c5e6c6.jpeg" },
                { id: "002", name: "迪丽热巴",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861542943&di=9fe9365124a4aae6cc6cf483aa2a9e18&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fwh%253D680%252C800%2Fsign%3Dbb541c4377f40ad115b1cfe56f1c3de7%2F50da81cb39dbb6fde349ce5d0524ab18972b37be.jpg" },
                { id: "003", name: "郑爽",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861570612&di=60b6d39dcbac9e1ea77b747d42f9f19d&imgtype=0&src=http%3A%2F%2Ftc.sinaimg.cn%2Fmaxwidth.800%2Ftc.service.weibo.com%2Fmmbiz_qpic_cn%2F1ab918195e7c8a94cc6c95182fbde786.jpg" },
                { id: "004", name: "杨幂",imgUrl:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1593861759697&di=6771e7279c145513968ce221a29a6b0e&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20130816%2FImg384334041.jpg" }
            ]
        }
    },
    methods: {
        btnclick(item) {
            //发射事件，自定义事件
            this.$emit("itemclick", item)
        }
    }
})

const app = new Vue({
    el: "#app",
    components: {
        "my-cpn": cpnC
    },
    data: {
        message: "",
        imgUrl:""
    },
    methods: {
        btnClick: function (item) {
            this.message = "你选择了：" + item.name + ",学号:" + item.id
            this.imgUrl=item.imgUrl
        }
    }
})

<div id="app">
	<my-cpn @itemclick="btnClick"></my-cpn>
	<h3>{{message}}</h3>
	<image width="200px" :src="imgUrl"></image>
</div>

<script type="text/x-template" id="cpn1">
	<div>
		<button @click="btnclick(stu)" v-for="stu in students">
        {{stu.name}}
        </button>
	</div>
</script>