vue09--组件

婉菡

于 2021-02-13 09:14:39 发布

阅读量104

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/gcyqweasd/article/details/113799090

版权

Vue.js 组件事件处理数据绑定局部组件

关键词由CSDN通过智能技术生成

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>组件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<button type="button" @click="sub()">提交</button>
			</div>
			<aa></aa>
		</div>
		<!--组件模板-->
		<template id="tmp1">
			<div>
				<div>局部组件</div>
				<p @click="fun()">{{message}}</p>
			</div>
		</template>
		
		<script>
			//创建组件			
			let vm = new Vue({
				el: '#app',
				components: {
					'aa': {
						template: '#tmp1',
						data() {
							return {
								message: 'aaaa'
							}
						},
						methods: {
							fun() {
								alert("111")
							}
						}
					}
				},
				methods:{
					sub(){
						console.log("222");
					}
				}
			});
		</script>
		</head>

		<body>
		</body>

</html>

在这里插入图片描述

婉菡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue09--组件

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>组件</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head> <body> <div id="app">
复制链接

扫一扫

专栏目录