组件是可复用的 Vue 实例，且带有一个名字。把这个组件作为自定义元素来使用。组件的好处是写一次可以进行任意次数的复用
全局组件
<div id="app">
<!-- 使用组件的方式：将组件名作为标签名 -->
<mycomponent></mycomponent>
<!-- 组件可任意次数调用 -->
<mycomponent></mycomponent>
</div>
<script>
Vue.component('mycomponent', {
template: '<h2>自定义的全局组件</h2>'
})
var app = new Vue({
el: '#app',
})
</script>
上面代码中我们直接使用 Vue.component() 方法定义了组件，而这个 mytemp 组件可以用在所有 vue 实例中，这种组件被称为 全局组件
私有组件
在具体的某个vue实例中，也可以定义组件，但是组件仅会在具体的 vue 实例中起作用，这种组件被称为 局部(私有)组件
<div id="app">
<!-- 使用组件的方式：将组件名作为标签名 -->
<mycomponent></mycomponent>
</div>
<div id="app2">
<!-- 不起作用 -->
<mycomponent></mycomponent>
</div>
<script>
var app = new Vue({
el: '#app',
// 该实例的私有组件
components: {
mycomponent: {
template: '<h2>自定义的全局组件</h2>',
}
}
})
var app2 = new Vue({
el: "#app2",
})
</script>
注意
组件名如果是驼峰法命名，使用组件时要将大写字母改为小写，并且在前面加上 -
组件中的 template 属性必须有一个唯一的根元素，否则会报错
<div id="app">
<!-- 大写字母应用 - 隔开 -->
<my-component></my-component>
<!-- 用小写不起作用 -->
<mycomponent></mycomponent>
</div>
<script>
var app = new Vue({
el: '#app',
// 该实例的私有组件
components: {
myComponent: {
template: '<h2>自定义的全局组件</h2>',
}
}
})
</script>
组件使用实例
三栏布局
image
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<style>
.top {
height: 50px;
}
.left, .right {
float: left;
height: 300px;
width: 50%;
}
</style>
<div id="app">
<top></top>
<left></left>
<right></right>
</div>
<script>
var app = new Vue({
el: '#app',
// 该实例的私有组件
components: {
top: {
template: '<div class="top bg-primary"></div>'
},
left: {
template: '<div class="left bg-success"></div>'
},
right: {
template: '<div class="right bg-warning"></div>'
},
}
})
</script>
组件中的数据及方法
组件是带有名字的可复用的 Vue 实例 ，所以它们与 new Vue 实例对象接收相同的参数选项 data、computed、watch、methods , 但 el例外；
虽然组件和实例对象可以接收相同的参数选项，但在具体使用中，vue 实例对象的 data 与组件中的 data 还是有差异的, 在自定义的组件中，data 必须是一个函数
<div id="app">
<my-component></my-component>
</div>
<script>
var app = new Vue({
el: '#app',
// 该实例的私有组件
components: {
myComponent: {
// 组件中的data必须是一个函数
data: function(){
return {msg: '点我啊'}
},
methods: {
clickme() {
alert('点了');
}
},
template: '<div @click="clickme">{{ msg }}</div>'
}
}
})
</script>
vue实例也是组件
通过 new Vue() 可以得到一个实例对象，其实这个实例对象就是一个特殊的组件，也有 template 参数，也可以当做组件来使用
<div id="app">
{{ msg }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
template: '<h2>组件</h2>'
})
</script>
上面的代码中直接为Vue 实例对象传入了 template 参数，那么 vue 会使用template中的数据替换 el 选中的整个 DOM 节点 , 因此 data 选项中的的数据也不会绑定，因为在绑定数据之前，整个 DOM 节点包括节点中 {{msg}} 都会被替换；如果想让数据正常绑定，我们可以在 template 数据中加入 {{msg}}
<script>
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
template: '<h2>组件{{ msg }}</h2>'
})
</script>
