创建全局组件的三种方式

2019-08-14 10:30:12来源:博客园 阅读 ()

什么是组件?

  组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件就可以了。

组件化和模块化的区别

  • 模块化:是从代码逻辑的角度进行划分的,方便代码分层开发,保证每个模块功能的职能单一。例如:NodeJS
  • 组件化:是从UI界面的角度进行划分的,前端的组件化,方便UI组件的重用

方式一

  使用 Vue.extend 配合 Vue.component  来进行创建全局组件

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>
<body>
    <div id="app">
        <!-- 如果要使用组件,直接把组件的名称,以 HTML 标签的形式,引入到页面中 -->
        <mycom1></mycom1>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        // 1.1 使用 Vue.extend 来创建全局的 Vue 组件
        const com1 = Vue.extend({
            template: '<h3>这是使用 Vue.extent 创建的组件</h3>'// 通过 template 属性,指定组件要展示的 HTML 结构
        });
        // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象)
        // Vue.component('myCom1', com1);
        // 如果使用 Vue.component 定义全局组件的时候,组件名使用了 驼峰命名,则
        // 在引用的时候,需要把大写字符改为小写字符,同时,两个单词连接使用 -
        Vue.component('mycom1', com1);

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>
</html>

当然,方式一也可以直接将第一步骤省略,直接:

Vue.component('mycom1', Vue.extend({
        template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
}));

方式二

  直接使用 Vue.component 创建组件(其实就是在方式一的基础上更加省略而已)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>

<body>
    <div id="app">
        <mycom2></mycom2>
    </div>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        /**
        * 2. 直接使用 Vue.component 创建组件
        * @param1  {String}  组件的名称
        * @param2  {Object}  组件模板对象
        */        
        Vue.component('mycom2', {
            // 注意:无论是哪种方式创建出来的组件,组件的模板中必须有且只有一个唯一的根元素
            template: '<div><h1>这是直接用 Vue.component 创建的组件</h1><span>123</span></div>'
        });

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

方式三

  在 方式二的基础上将第二个参数中的HTML代码结构,替换为一个 ID:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <title>独秀不爱秀</title>
</head>

<body>
    <div id="app">
        <mycom3></mycom3>
    </div>


    <!-- 在被控制的 #APP 外面,使用 template 元素定义组件的模板结构 -->
    <template id="tmpl">
        <div>
            <h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的智能提示和高亮</h1>
            <h3>不错,好用</h3>
        </div>
    </template>

    <script src="./lib/vue-2.4.0.js"></script>

    <script type="text/javascript">
        Vue.component('mycom3', {
            template: '#tmpl'
        });

        const vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });
    </script>
</body>

</html>

 

  


原文链接:https://www.cnblogs.com/duxiu-fang/p/11321636.html
如有疑问请与原作者联系

标签:HTML使用功能定义开发区别

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端笔记之微信小程序(三)GET请求案例&amp;文件上传和相册API&

下一篇:没有了