vue.js 组件

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值