Vue.js如何封装组件？

需求：现在需要在多个页面使用到上拉和下拉的滚动效果，手动封装一个BScroll的，如果没有安装better-scroll插件的安装上就可以

1、首先：在src文件目录下创建一个common文件夹，里面在建一个封装组件的文件夹，比如：BScroll文件夹，在该文件夹里面建一个index.vue 文件，里面是需要封装的具体内容：
<template>
    <div class="wrapper">
        <slot></slot>
    </div>
</template>

<script>
//引入better-scroll
import BScroll from "better-scroll";
export default {
    mounted() {
     //this.$refs.wrapper这是一个滚动的盒子   盒子滚动原理：内容区的长度比盒子的长度要大，就可以实现滚动
        this.scroll = new BScroll(this.$refs.wrapper);
    }
}
</script>

<style scoped>
    .wrapper{
        height:100%;
        position: absolute;
    }
</style>

2、其次，需要引入文件到main.js中，在main.js里面注册主键：
import Bscroll from "@/common/BScroll";
Vue.component("BScroll",Bscroll);


3、以上步骤完成之后便可以可以添加到页面：比如说home.vue页面需要用到，直接在templatel结构里面讲内容包裹起来就可以了

<template>
	<BScroll>
    <div>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
        <span>
            内容
        </span>
    </div>

		</BScroll>
</template>

最后

以上就是儒雅大雁为你收集整理的Vue.js如何封装组件？的全部内容，希望文章能够帮你解决Vue.js如何封装组件？所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。