component组件
柳镜
什么是组件？
组件(Component)是Vue js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用is 特性进行了扩展的原生HTML元素。
所有的Vue组件 同时也都是Vue的实例，所以可接受相同的选项对象（除了一些根级特有的选项）并提供相同的生命周期钩子。
vue组件分为：
局部组件：只能在el定义的范围内使用，
全局组件：可以在随意地方使用
父子组件：之间的传值问题。父子（属性通信）、子父（事件触发）、兄弟通信（EventBus）
template:’’ 组件要显示的内容
component('',) 注册组件。
data数据属性：写函数;
接收两个参数：
第一个参数（组件名称）：用来使用的标签
第二个参数（组件的描述对象）：标识要显示
全局组件注册方式：Vue.component(组件名,{方法})
定义全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 2.使用组件 类似html标签 -->
<my-component></my-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.组件名为"conter"; 2.data 写函数; 3.template 写组件的内容（元素和触发的事件）
Vue.component("my-component",{
data:function(){
return {count:0}
},
//template 是模板的意思，在 html 里面是一个可以同时控制多个子元素的父元素。在这里定义了组件的内容
template:`
<button v-on:click="count++">
点击计算点击次数：{{count}}次
</button>
`,
});
var vm = new Vue({
el: "#app",
data:{
},
})
</script>
</html>
局部组件注册方式，直接在Vue实例里面注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<child-component></child-component>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var child={
template:`<button @click='add2'>我是局部组件:{{m2}}</button>`,
data:function(){
return {m2:1}
},
//定义方法
methods:{
add2:function(){
this.m2++
}
}
};
var vm = new Vue({
el: "#app",
components:{
"child-component":child
}
})
</script>
</html>
具名插槽
组件的 template 里面定义好插槽（插座） 对于这种有名称的插槽一般我们叫做具名插槽(或者有名插槽)。
对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.p1 {
font-size: 24px;
}
</style>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<body>
<div id="app">
<vue-pannel>
<p slot="main">身体信息</p>
<h3 slot="footer">底部信息</h3>
<h3 slot="header">头部信息</h3>
<p>其他的内容，没有任何一个与之对应的具名插槽，则该内容会被放置在 default插槽里面，如果有的 default插槽的话。
如果在 template 里面没有事先定义好 default 插槽，则该段内容会被丢弃</p>
</vue-pannel>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//全局组件
Vue.component('vue-pannel', {
//组件的 template 里面定义好插槽（插座） 对于这种有名称的插槽一般我们叫做
// 具名插槽，或者叫做有名插槽。 对于没有取名称的插槽一般我们叫做匿名插槽（或者叫做 default 默认插槽）
//slot插槽 插座
template: `
<div>
<p style="color:red;font-size:30px;"><b>全局组件</b></p>
<slot name="header"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
<slot name="default"></slot>
<slot></slot>
</div>
`,
});
// 局部组件
const MyComponent ={
template: `
<div>
<p style="color:red;font-size:30px;"><b>局部组件</b></p>
<slot name="header"></slot>
<slot name="main"></slot>
<slot name="footer"></slot>
<slot name="default"></slot>
<slot></slot>
</div>
`,
}
var vm = new Vue({
el: "#app",
// 局部组件 需要在Vue实例中注册
components:{
"vue-pannel":MyComponent
}
})
</script>
</html>
类似资料：