vue组件的注册

最新推荐文章于 2024-06-29 16:24:25 发布

armwind

最新推荐文章于 2024-06-29 16:24:25 发布

阅读量152

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/armwind/article/details/113051867

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

有时候项目开发时，我们给一个普通组件增加样式以使达到更好的显示效果。但是如果在其它地方也想使用这种样式的组件，难道要重新拷贝过来吗？答案是不需要的，这里就需要将这个经常用的组件，封装成一个组件，注册到Vue中。

文章目录

1.注册全局组件

我们可以使用Vue.component,更多请参考官方文档：

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

这里可以把组件单独放到要给变量中，如下例子就是单独放到一个变量中，然后注册到Vue中。注意这里Vue是一个全局变量，所以注册到它这里的组件全局可见.
下面的例子可以直接在https://www.runoob.com/try/try-cdnjs.php?filename=vue2-v-for 网页中运行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-for</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button-test></button-test>
    <button-test></button-test>
    <button-test></button-test>
</div>

<script>
let ComponentA = {
    data:function () {
        return {count:0}
    },
    template:'<button v-on:click="count++"> cliked {{count}} times </button>'
}
Vue.component('button-test', ComponentA);

new Vue({
  el: '#app',
  data: {
  },
 })
</script>
</body>
</html>

2. 注册局部组件

为什么需要局部组件呢？所谓局部组件，就是有些组件只需要在部分组件或文件中使用，所以没有必要注册成全局组件。当这些部分组件或文件，关掉后，则这个局部组件就不会参与编译。可以节约部分网络带宽。
注册局部组件需要这样写，例如下面ComponentB想使用ComponentA,则需要在其components：属性中添加ComponentA即可。如下所示:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

下面的例子可以直接在https://www.runoob.com/try/try-cdnjs.php?filename=vue2-v-for 网页中运行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue v-for</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>

<script>
let ComponentA = {
    data:function () {
        return {count:0}
    },
    template:'<button v-on:click="count++"> This ComponentA clicked {{count}} times </button>'
}
let ComponentB = {
    data:function () {
        return {count:0}
    },
    template:'<button v-on:click="count++"> This ComponentB clicked {{count}} times </button>'
}
//Vue.component('button-test',ComponentA);

new Vue({
  el: '#app',
  data: {
 
  },
   components: {
    'component-a': ComponentA,
  }
 })
</script>
</body>
</html>

上面这个例子,就是以局部组件的方式，使用了ComponentA，可以看到我们没有注册ComponentB,那么ComponentB的标签，在运行时是不会被解析成对应的组件的。
在这里插入图片描述

3.单文件组件注册和使用

在正常的开发过程中，一般一个组件一个文件。单文件时，文件结构如下所示：
下面是我写的一个简单demo。很简单，输出一段话

<template>
<p class="Tick111">this is tick test add by {{name}}</p>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {name:"armwind"}
        }
    }
</script>

<style>
    .Tick111{
        /*font-size: rem(16);*/
        line-height: 1.2;
        border-bottom: rem(1) solid #F1F1F1;
        background: red;
        border-radius: rem(5);
    }
</style>

我们在另外一个文件引用这个组件

引用方式1
先将组件导入进来，然后将组件保存到components，引用时就使用这个名字。

<script>
import comTick from '@/views/demo/tick'

    export default {
        name: "demo",
        components: {
            comTick
        },
    }
</script>

方式2：
直接在components中导入这个包，这两种都能达到使用效果，建议使用第二种

<script>
    export default {
        name: "demo",
        components: {
            comTick: () => import('@views/demo/tick')
        },
    }
</script>

效果展示

<template>
    <div>
        <nut-cell title = "姓名"  :desc = "this.formData.name"></nut-cell>
        <nut-cell title = "地址"  :desc = "this.formData.address" :showIcon = "true"></nut-cell>
        <nut-cell title = "邮箱"  :desc = "this.formData.email"></nut-cell>
        <comTick></comTick>
    </div>
</template>

<script>
    export default {
        name: "demo",
        data() {
            return {
                formData:{}
            }
        },
        components: {
            comTick: () => import('@views/demo/tick')
        },
    }
</script>

<style scoped>

</style>

可以看到这个组件已经添加成功了。这个时候comTick就是当前窗体的子组件
在这里插入图片描述

armwind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件的注册

有时候项目开发时，我们给一个普通组件增加样式以使达到更好的显示效果。但是如果在其它地方也想使用这种样式的组件，难道要重新拷贝过来吗？答案是不需要的，这里就需要将这个经常用的组件，封装成一个组件，注册到Vue中。文章目录1.注册全局组件2. 注册局部组件3.单文件组件注册和使用1.注册全局组件我们可以使用Vue.component,更多请参考官方文档：Vue.component('component-a', { /* ... */ })Vue.component('component-b', { /
复制链接

扫一扫

专栏目录