更多优质内容
请关注公众号
请关注公众号
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
上面是官网对组件的定义，下面直接上代码
组件的基本使用
定义组件：
/先定义一个组件对象
let template = {
props:['title','red_font'], //这个是使用组件时要传入的参数
template:`<div :class="{'red':red_font}">{{title}}</div>`
}
//注册这个组件
Vue.component('c1', template); //全局注册，放在main.js中，第一参是组件名
//或者使用局部注册
new Vue({
el:"#app",
components:{
'c1':template
},
data:{
title:xxx,
red_font:xxx
}
});调用组件：
<c1 :title="title" :red_font="red_font"></c1>全局组件和局部组件
1.全局注册
到目前为止，我们只用过 Vue.component 来创建组件：
Vue.component('my-component-name', {
// ... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：
//定义
// #main.js
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })//调用
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>在所有子组件中都可以使用这3个子组件，这三个组件在各自内部也都可以相互使用。
2.局部注册
一般而言我们更多的使用局部注册
var ComponentA = { /* ...定义template和props属性 */ }
var ComponentB = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})然后使用组件的时候
<component-a></component-a>即可
接下来我们在vue脚手架项目中演示一下如何使用：
我们现在要定义一个组件 <com-a>
首先在 /src/components下定义一个ComA.vue
<!-- #ComA.vue -->
<template>
<div>
<a href="https://www.baidu.com"></a>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>注意：<template>内必须有一个<div>标签包住你组件内的所有内容，不然会报错
子组件已经完成，要在根组件App.vue引入：
在 /src/App.vue 中：
<!-- # App.vue -->
<template>
<div id="app">
<com-a></com-a> <!-- 使用组件 -->
</div>
</template>
<script>
import ComA from "@/components/ComA" //引入ComA组件
export default {
name: 'App',
components:{
ComA //注册组件
}
}
</script>首先要引入组件
import ComA from "@/components/ComA"
然后注册组件
components:{
ComA
}
再使用组件
<com-a></com-a>
注册组件的名称是ComA的驼峰命名，使用组件时要转化为-
当然我们可以使用 is 属性动态使用组件
例如上面什么都不变，<com-a></com-a>改为：
<div is="com-a"></div>
效果相同，但是这样的好处是可以使用变量赋给is属性
<!-- # App.vue -->
<template>
<div id="app">
<div :is="ca"></div> <!-- 使用组件 -->
</div>
</template>
<script>
import ComA from "@/components/ComA" //引入ComA组件
export default {
name: 'App',
components:{
ComA //注册组件
},
data(){
return {
ca:"com-a"
}
}
}
</script>这里的data要定义为方法而不能定义为属性
组件间的通信：
a.父组件传变量给子组件
可以通过在子组件中定义一个 props 属性，通过在父组件调用子组件标签的时候传递数据，数据会被传递到子组件的props中
例如：
在ComA.vue:
<!-- # ComA.vue -->
<template>
<div>
{{num}}
</div>
</template>
<script>
export default {
props:["num"]
}
</script>在App.vue
<!-- # App.vue -->
<template>
<div id="app">
<com-a :num="num"></com-a> <!-- 使用组件 -->
</div>
</template>
<script>
import ComA from "@/components/ComA" //引入ComA组件
export default {
name: 'App',
components:{
ComA //注册组件
},
data(){
return {
num:100
}
}
}
</script>其中 props 可以传数组或者对象
props:["a","b","c"] //表示子组件中有a,b,c 3个变量或者
props:{
a:[String,Number] //表示a变量限定了数据类型为字符串和数字
}或者
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
b.子组件通过事件传递信息给父组件
ComA.vue :
<!-- # ComA.vue -->
<template>
<div>
<a href="https://www.baidu.com">百度一下你就知道</a>
<button @click="emitMyEvent">触发事件</button>
</div>
</template>
<script>
export default {
data(){
return {
myName:"zbp"
}
},
methods:{
emitMyEvent(){
this.$emit("my-event",this.myName) //这里的事件名my-event要写成-,不要写成驼峰
}
}
}
</script>
<style>
</style>
这里意思是：点击按钮，触发emitMyEvent()，然后this.$emit("my-event",this.myName)表示，去触发一个叫my-event的事件，并且往这个事件里面的回调函数传参this.myName
在App.vue 中：
<template>
<div id="app">
<h2>我的名字是：{{name}}</h2>
<com-a @my-event="getMyEvent"></com-a>
</div>
</template>
<script>
import ComA from "@/components/ComA"
export default {
name: 'App',
components:{
ComA
},
data(){
return {
name:""
}
},
methods:{
getMyEvent(param){
this.name = param
}
}
}
</script>
在父组件中 @my-event="getMyEvent" 表示监听my-event事件，一旦触发就调用getMyEvent事件，然后在这个事件中将上面的this.myName传到param参数，param再赋值给父组件的name变量
注意，组件的属性是大小写不敏感的，所以别用驼峰命名而是用-，如上面的my-event
c.在父组件中插入html代码传递给子模板
#在父组件中：
<com-a> <!-- com-a 是所引用的子组件 -->
<p>123</p>
</com-a>#在子组件要用<slot></slot>标注要插在子组件的哪个地方
#子组件中
<template>
<div>
<a href="https://www.baidu.com">百度一下你就知道</a>
<slot></slot>
</div>
</template>此时 <p>123</p>就会将子组件的<slot></slot>给替换掉,相当于将<p>123</p>插入到<slot>的位置
#slot标签中可以放一些默认值：
<template>
<div>
<a href="https://www.baidu.com">百度一下你就知道</a>
<slot><span>默认内容</span></slot>
</div>
</template># 还可以定义多个slot
#父组件
<template>
<com-a>
<p slot="header">头部内容</p>
<p slot="footer">尾部内容</p>
</com-a>
</template>
#子组件
<template>
<div>
<a href="https://www.baidu.com">百度一下你就知道</a>
<slot name="header">默认头部内容</slot>
xxxxxxx
<slot name="footer">默认尾部内容</slot>
</div>
</template>d.动态组件
之前举了一个例子
<div :is="ca"></div>
这种通过is的方式的就是动态组件
ca是一个变量，你可以改变ca的变量内容来做到组件的切换
<keep-alive>
<div :is="ca"></div>
</keep-alive>如果使用了keep-alive的话，切换过的组件会被缓存起来，当切换回来的时候就不会又加载一次
PS：在子组件中定义的<style>样式是在全局都有效的，如果想仅在该子组件有效，可以<style scoped>
加个scoped属性即可
