全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script>
const cpn=Vue.extend({
template:`
<div>
<h2>我是vue</h2>
<p>嘻嘻</p>
</div>
`
});
Vue.component('cpn',cpn);
let vm = new Vue({
el: '#app',
data: {},
methods: {}
});
let app2=new Vue({
el:'#app2'
})
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id ="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
</div>
<script>
const cpnC=Vue.extend({
template:`
<div>
<h2>我是vue</h2>
<p>嘻嘻</p>
</div>
`
});
let vm = new Vue({
el: '#app',
components: {
cpn: cpnC
}
});
let app2=new Vue({
el:'#app2'
})
</script>
</body>
</html>