<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
