Vue中组件的定义与注册

最新推荐文章于 2024-09-02 15:51:54 发布

张侦毅

最新推荐文章于 2024-09-02 15:51:54 发布

阅读量688

点赞数

分类专栏： Vue Vue 文章标签： Vue 组件的定义与注册

本文链接：https://blog.csdn.net/ZZY1078689276/article/details/83687799

版权

Vue 同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

Vue

39 篇文章 4 订阅

订阅专栏

文章目录

组件的用法
源码
- 结果

作用：

组件，是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

组件的用法

组件一共有四种用法，分别是下面四种情况。

先定义，后注册

这种方法的组件一共分为两步，第一步先定义一个组件，第二部再使用该定义的组件。

定义组件：

ar demo1 = Vue.extend({
   template:'<h1>示例1</h1>'
});

注册组件：

Vue.component('demo1',demo1);

同时定义并注册组件

这种方法其实就是第一种方法的合并版本，就是将组件的定义与使用放在了一起。

Vue.component('demo2',{
    template:'<h1>示例2</h1>'
});

使用HTML模版template

这种方式与上面很大的不同点是使用了HTML模板，而这种模板在IDE中是有智能提示与纠错的，因而更方便于使用，所以一般我们推荐使用这种方式定义与注册组件。

Vue.component('demo3',{
    template:'#demo3'
});

页面的模板：

<template id="demo3">
    <h1>示例3</h1>
</template>

使用HTML模版script

这第四种方式其实和第三种用法是完全一样的，不同之处在于其模版标签不同，前者是使用的<template></template>而后者是使用的<script type="x-template"></script>

Vue.component('demo3',{
    template:'#demo3'
});

页面的模板：

<script type="x-template" id="demo4">
    <h1>示例4</h1>
</script>

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>
<body>
    <template id="demo3">
        <h1>示例3</h1>
    </template>
    <script type="x-template" id="demo4">
        <h1>示例4</h1>
    </script>
    <div id="app">
        <demo1></demo1>
        <demo2></demo2>
        <demo3></demo3>
        <demo4></demo4>
    </div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script type="application/javascript">
    //1、定义组件
    var demo1 = Vue.extend({
        template:'<h1>示例1</h1>'
    });
    //2、注册组件
    Vue.component('demo1',demo1);
    //第二种方法
    Vue.component('demo2',{
        template:'<h1>示例2</h1>'
    });
    //第三种方法
    Vue.component('demo3',{
        template:'#demo3'
    });
    //第四种方法
    Vue.component('demo4',{
        template:'#demo4'
    });
    new Vue({
        el:'#app'
    });
</script>
</body>
</html>