Vue自定义组件与事件传递-优快云博客

本文链接：https://blog.youkuaiyun.com/chadcao/article/details/102745159

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>

vue.js 组件