<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>组件</title>
</head>
<body>
<div id="app">
{{msg}}
<my-Come></my-Come>
</div>
<div id="app2">
{{msg}}
<my-Come></my-Come>
</div>
<script type="x-template" id="footer">
<div>
<ul>
<li v-for="item in items">
{{item.id}}--{{item.username}}
</li>
</ul>
</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
// 注册全局组件
let com = Vue.component("myCome", {
data() {
return {
msgs: "首页",
items: [
{ id: 1, username: "111" },
{ id: 2, username: "222" },
{ id: 3, username: "333" },
{ id: 4, username: "444" },
{ id: 5, username: "555" },
{ id: 6, username: "666" },
{ id: 7, username: "777" },
],
};
},
methods: {
show() {
alert("122");
},
},
template: "#footer",
// template: `<h1>{{msgs}}<button @click="show">我是事件</button></h1>`,
});
let app = new Vue({
el: "#app",
data: {
msg: 111,
},
});
let app2 = new Vue({
el: "#app2",
data: {
msg: 111,
},
component: {
myCome: com,
},
});
</script>
</html>
网友评论