金山老师的笔记12 初识Vue组件
在vue中，组件是最重要的组合部分，官方中定义组件为可复用的vue实例，分为全局组件和局部组件，接下来通过实例来分别演示两种不同的组件。
12.1.全局组件
全局组件可以在任意Vue示例下使用。
html
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('mycomponent', {
template: '<h3>我是全局组件</h3>'
});
var vm = new Vue({
el: '#app',
});
</script>通过上面的例子，我们可以总结出全局组件的使用步骤：
- 使用vue.component()注册组件，需要提供2个参数：组件的标签名和组件构造器。
- vue.component()内部会调用组件构造器，创建一个组件实例
- 将组建挂载到某个vue实例下。
注意：一个组件的template部分，必须要包裹在一个根容器中。
因为组件是可复用的vue实例，所以它们也能有data、computed、watch、methods以及生命周期钩子等。
html
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('mycomponent', {
template: `<div>
<h3>我是全局组件</h3>
<button @click="add">加</button>
</div>`,
data(){
return {
num:1
}
},
methods:{
add(){
this.num++;
}
}
});
var vm = new Vue({
el: '#app',
});
</script>上面代码中有两个注意事项：
- 组件模板的内容，可以写在一对反引号中（``），这样就可以不使用字符串拼接的形式了。
- 一个组件的data选项必须是一个函数，该函数返回一个对象。
12.2.局部组件
如果不需要全局注册，或者是让组件使用在其它组件内，可以用选项对象的components属性实现局部注册。 因此我们可以将上面的全局组件改为局部组件。
html
<div id="app">
<mycomponent></mycomponent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let obj = {
template: `<div>
<h3>我是局部组件</h3>
<button @click="add">加</button>
</div>`,
data(){
return {
num:1
}
},
methods:{
add(){
this.num++;
}
}
};
var vm = new Vue({
el: '#app',
components:{ //声明局部组件
mycomponent:obj
}
});
</script>12.3.组件模板
如果组件中的template内容过多，那么可以使用组件模板来声明template中的内容。
html
<div id="app">
<mycomponent></mycomponent>
</div>
<!-- 组件模板 -->
<template id="mytemplate">
<div>
<h3>我是局部组件</h3>
<button @click="add">加</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let obj = {
template: '#mytemplate', //使用选择器应用组件模板
data() {
return {
num: 1
}
},
methods: {
add() {
this.num++;
}
}
};
var vm = new Vue({
el: '#app',
components: { //声明局部组件
mycomponent: obj //组件名:组件实例
}
});
</script>12.4 完整代码
- 全局组件
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<mycomponent></mycomponent>
<mycomponent></mycomponent>
</div>
<script>
Vue.component('mycomponent', {
template: `<div> <h3>我是全局组件</h3> </div>`,
data() {
return {}
},
methods: {
add() {
this.num++;
}
}
});
var vm = new Vue({
el: '#app',
});
</script>
</body>
</html>- 局部组件
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<localcomponent></localcomponent>
<localcomponent></localcomponent>
<localcomponent></localcomponent>
</div>
<template id="btncounter">
<div>
局部组件 {{num}}
<button @click='counter'>数量++</button>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
components:{
localcomponent:{
// template:`
// <div>
// 局部组件 {{num}}
// <button @click='counter'>数量++</button>
// </div>`,
template:'#btncounter',
data(){
return {
num:1
}
},
methods:{
counter(){
this.num++;
}
}
}
}
});
</script>
</body>
</html>