24
2020
08

Vue 如何注册组件

组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树


全局注册


在 src 文件夹中新建 utils 文件夹,在 utils 文件夹中新建 components.js 文件

在 components.js 文件引入所有要注册的全局组件

在 main.js 中引入 components.js 文件并使用 Vue.use() 全局注册

举例:

组件 diyHeader.vue


<template>

    <div>

        <div  id="header" @click="fun"></div>

    </div>

</template>


<script>

export default {

    methods:{

        fun(){

            alert(1);

        }

    }

}

</script>


<style>

#header{

    height: 100px;

    background: red;

}

</style>


util下components.js


import DiyHeader from "../components/diyHeader.vue"

export default (Vue)=>{

    Vue.component("DiyHeader", DiyHeader)

  }

main.js


import components from "./util/components"

Vue.use(components);

之后就可以直接在项目中使用 DiyHeader 这个组件


局部注册


在页面里导入组件然后放到components中就可以使用了


import DiyHeader from "../components/diyHeader.vue"

export default {

  name: "App",

  components: { DiyHeader },

}

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。