Vue组件
全局组件定义
四种方式
//1.Vue.extend() Vue.component()
let login = Vue.extend({
template: '<h1>我们</h1>'
})
Vue.component('login', login); //第一个参数展示到页面上的标签名,第二个参数声明的变量
//2.
Vue.component('login', {
template: '<h1>我们</h1>'
})
//3.
Vue.component('login', {
template: '#login'
})
<script type="x-template" id="login">
<h1>登录了</h1>
</script>
//4.
//第一个参数:展示到页面的标签名
//第二个参数:对象{template:''}
//script中写入
Vue.component('mine', {
template: '#mine'
})
//在body中写入
<template id="mine">
<div>
我的页面
</div>
</template>
//在#app中写入定义的标签名
<mine></mine>
私有组件定义
//与data和methods同级
components: {
'box': {
template: '#mine'
}
}
//写入body中
<!-- 不要使用内置或保留的Html元素作为组件id: -->
<template id="mine">
<!-- 组件模板应该只包含一个根元素 -->
<div>
我的页面
<div>
第二个元素
</div>
<div>第三个元素</div>
</div>
</template>