对自己使用过的component的几种写法做一个总结,下次翻着也方便。
1.使用vue+webpack搭建架构的写法,下面是一个a.vue
<template>
<div id="down1">
</div>
</template>
<script>
export default{
data() {
return {
}
},
methods: {}
}
</script>
然后在别的页面引用:
import a from 'a';
<template>
<hello></hello>
</template>
<script>
export default{
data() {
return {
}
},
components: {
'hello':a
}
}
</script>
2.引用vue.js,使用template标签,直接使用全局的Vue注册components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<v-hello></v-hello>
</div>
<template id="vHello">
</template>
</body>
<script src="vue.js"></script>
<script>
Vue.component('v-hello',{
template: '#vHello'
})
new Vue({
el: '#app'
})
</script>
</html>
3.引用vue.js,使用template标签,var 一个component
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<hello></hello>
</div>
</body>
<script src="vue.js"></script>
<script>
var hello={
template: `<div>hello</div>`
}
new Vue({
el: '#app',
components:{
hello
}
})
</script>
</html>