1)自定义组件:MyStudent.js
/* 自定义组件 */
Vue.component('my-student', {
props: ['student'],
/* 内建事件my-click */
template: `<li v-bind:id="student.id" v-on:click="componentClick(student.id,student.name);
$emit('my-click',student.id,student.name)">{{student.name}}</li>`,
methods:{
componentClick:function(id,name){
console.log('组件事件:'+id);
console.log('组件事件:'+name);
}
}
})
2)页面调用自定义组件:index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.min.js"></script>
<!-- 引用组件js -->
<script type="text/javascript" src="Components/MyStudent.js"></script>
</head>
<body>
<div id='vm'>
<!-- 引用组件,调用组件内建事件my-click -->
<my-student v-for="student in students1" v-bind:student="student" v-on:my-click="myClick">
</my-student>
<my-student v-for="student in students2" v-bind:student="student" v-on:my-click="myClick">
</my-student>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el: '#vm',
data: {
students1: [{
id: '1',
name: '张三'
},
{
id: '2',
name: '李四'
},
{
id: '3',
name: '王五'
}
],
students2: [{
id: '11',
name: '学生1'
},
{
id: '22',
name: '学生2'
},
{
id: '33',
name: '学生3'
}
]
},
methods: {
myClick: function(id, name) {
console.log('页面调用组件内建事件:'+id);
console.log('页面调用组件内建事件:'+name);
}
}
});
</script>
</html>