VUE如何封装一个组件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE如何封装一个组件相关的知识,希望对你有一定的参考价值。
参考技术A 1. 在compoents文件夹中新建一个vue文件(以Swiper为例)2. 在main.js中全局引入,先import再注册到VUE中
3. 接着就可以在任何页面直接使用自己定义的组件
Swiper组件中需要一个存放图片的数组(以list为例)
父组件往子组件中传值
子组件中规定接收值的类型,还可以设置默认值(要注意数组默认值的写法)
Vue组件高级 插槽的使用slot
slot的基本使用
- 组件的插槽是为了让封装的组件更加具有扩展性
- 让使用者可以决定组件内部的一些内容到底展示什么
如何去封装这类的组件 使用slot
- 如果每一个单独去封装一个组件,显然不合适;比如每个页面都返回,这部分就要重复封装
- 但是,如果封装成一个,也不合理,有些左侧是菜单,有些是返回等等
如何封装合适
- 抽取共性,保留不同
- 最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽
- 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
- 插槽的基本使用<slot></slot>
- 插槽的默认值<slot><button></button></slot>
如果有多个值,同时放入到组件进行替换时,一起作为替换元素
<div id="app"> <cpn><button>按钮</button></cpn> <cpn><span>哈哈啊哈</span></cpn> <cpn><i>呵呵呵</i></cpn> <cpn></cpn> </div> <template id="cpn"> <div> <h2>我是组件</h2> <p>hhhhh</p> <slot></slot> <!-- <slot><button></button></slot> //如果使用多btn给插槽默认值button --> </div> </template> <script> var app = new Vue({ el: \'#app\', components: { cpn: { template: \'#cpn\' } } }) </script>
具名插槽的使用
给slot id 更易使用 区分插槽
<div id="app">
<cpn><span slot="center">标题</span></cpn>
<cpn><button slot="left">返回</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边</span></slot>
<slot name="center"><span>中间</span></slot>
<slot name="right"><span>右边</span></slot>
</div>
</template>
<script>
var app = new Vue({
el: \'#app\',
components: {
cpn: {
template: \'#cpn\'
}
}
})
</script>
作用域插槽
编译作用域
- 我们通过例子理解这个概念
- 首先考虑下面的代码是否可以渲染出来
* <cpn v-show="isShow"></cpn> 中,我们使用了isShow属性
* isShow属性包含在组件中,也包含在Vue实例中
* 可以渲染出来
* 官方给了一条准则:父组件模板的所有东西都会在父级作用域内编译,子组件模板的所有东西都会在子级作用域内编译。
* 而我们使用<cpn v-show="isShow"></cpn>时候,整个组件的使用过程相当于在父组件中出现的
* 那么他的作用域就是父组件,使用的属性也是属于父组件的属性
* 因此,isShow使用的是Vue实例中的属性,而不是子组件的属性
<div id="app">
<cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
<div>
<h2>我是子组件</h2>
<p>我是子组件哈哈哈</p>
</div>
</template>
<script>
var app = new Vue({
el: \'#app\',
data: {
isShow: true
},
components: {
cpn: {
template: \'#cpn\',
data() {
isShow: false
}
}
}
})
</script>
作用域-插槽
* 作用域插槽是slot一个比较难理解的点
* 这里,我们用一句话对其做一个总结
* 父组件替换插槽的标签,但是内容由子组件来提供
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的是获取子组件中的names
2.5.x以下 需要template模板,以上不用-->
<template slot-scope="slot">
<span v-for="item in slot.data">{{item}}-</span>
</template>
</cpn>
<cpn>
<template slot-scope="slot">
<span>{{slot.data.join(\'*\')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="names">
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script>
var app = new Vue({
el: \'#app\',
data: {},
components: {
cpn: {
template: \'#cpn\',
data() {
return {
names: [\'TOM\', \'JENY\', \'BOB\', \'DAD\']
}
}
}
}
})
</script>
以上是关于VUE如何封装一个组件的主要内容,如果未能解决你的问题,请参考以下文章