layout: post title: “Vue.js组件” date: 2019-11-05 10:26:40

tags:

• 第12节 组件基础
  • 基本示例
  • 监听子组件事件
  • 流程
• 第13节 组件注册
  • 组件名
  • 全局注册
  • 局部注册
  • 模块注册
• 第14节 单文件组件
  • 非模块组件的缺点
  • 使用Vue.js的单文件组件准备工作
  • 使用webpack和browserify等构件工具
• 总结

Vue.js官方教程上的Vue组件相关内容

第12节 组件基础

基本示例

1. 组件是可复用的 Vue 实例，把经常重复的功能封装成组件,达到快捷开发的目的（就相当于自定义标签）
2. 创建组件语法格式:Vue.component(组件名称,{以对象的形式描述组件})
3. 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等，仅有的例外是el这样根实例特有的选项
4. html示例

    <div id="components-demo">
        <!--4采用html标签的形式对组件进行调用,标签的名称就是组件的名称-->
        <button-counter title="title1;"></button-counter>
        <!--组件是可以复用的-->
        <button-counter title="title2;"></button-counter>
    </div>
   

5. js示例

    <script type="text/javascript">
        // 1定义一个名为 button-counter 的新组件，描述了组件的数据和模板内容
        Vue.component('button-counter', {
            // 2通过props为组件定义属性
            props:['title'],
            data: function() {
                return {
                    count: 0
                }
            },
            // 3创建一个模板时需注意,一个组件的模板必须具备一个根节点
            // 绑定一个点击事件
            template: '<div><h1>h1...</h1><button v-on:click="count++">{ {title} } You clicked me { { count } } times.</button></div>'
        })
           
        // 5实例化一个Vue对象
        var vm = new Vue({
            el:"#components-demo",
            data:{  
            }
        });
    </script>
   

监听子组件事件

1. html示例

    <div id="components-demo">
        <!--5. 在组件的父级可以通过事件绑定的方式去接收到emit函数所触发的事件-->
        <button-counter title="title1;" @clicknow="clicknow">
            <!--8. 在组件的标签内部可以插入一些自定义的html内容-->
            <h2>h2...</h2>
        </button-counter>
    </div>
   

2. js示例

    <script type="text/javascript">
        Vue.component('button-counter', {
            props:['title'],
            data: function() {
                return {
                    count: 0
                }
            },
               
            // 7. 在模板内我们可以通过slot标签声明一个组件的插槽,通过插槽可以插入任意的html内容及标签 
            // 1. 把click++改成一个可执行的JavaScript函数 
            template: '<div><h1>h1...</h1><button v-on:click="clickfun">{ {title} } You clicked me { { count } } times.</button><slot></slot></div>',
            // 2. 使用methods属性去声明对应的函数
            methods:{
                clickfun:function(){
                    // 3. 在函数内部使用this对象对click变量进行处理,点击button按钮,count+1
                    this.count++;
                    // 4. 使用this对象的emit方法去触发一个事件
                    // 语法格式:this.$emit(事件名称,可携带的一些参数);
                    this.$emit('clicknow',this.count);
                }
            }
        })
           
        var vm = new Vue({
            el:"#components-demo",
            data:{  
            },
            // 6. 在页面上使用methods属性去声明clicknow方法
            methods:{
                // 函数能够正确执行,并可以接收组件内部传递出来的count数据的值 
                clicknow:function(e){
                    console.log(e);
                }
            }
        });
    </script>
   

流程

1. 定义一个名为 button-counter 的新组件，描述了组件的数据和模板内容
2. 通过props为组件定义属性
3. 创建一个模板绑定一个点击事件
4. 采用html标签的形式对组件进行调用,标签的名称就是组件的名称
5. 实例化一个Vue对象
6. 把click++改成一个可执行的JavaScript函数
7. 使用methods属性去声明对应的函数
8. 在函数内部使用this对象对click变量进行处理,点击button按钮,count+1
9. 使用this对象的emit方法去触发一个事件
10. 在组件的父级可以通过事件绑定的方式去接收到emit函数所触发的事件
11. 在页面上使用methods属性去声明clicknow方法
12. 在模板内我们可以通过slot标签声明一个组件的插槽,通过插槽可以插入任意的html内容及标签
13. 在组件的标签内部可以插入一些自定义的html内容

第13节 组件注册

组件名

1. 使用 kebab-case:Vue.component('my-component-name', { /* ... */ })
2. 使用 PascalCase:Vue.component('MyComponentName', { /* ... */ })
3. 直接在 DOM (即非字符串的模板) 中使用时只有kebab-case是有效的。

全局注册

1. 注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中
2. 示例

    // 全局注册button-counter组件
    Vue.component('button-counter',{
        props:['title'],
        data:function(){
            return{}
        },
        template:'<div><h1>hi...</h1></div>',
        methods:{
        }
    })
   

局部注册

1. 全局注册浪费空间
2. 示例

    // 局部注册
    var vm = new Vue({
        el:"#app",
        data:{
        },
        methods:{
            clicknow:function(e){
                console.log(e);
            }
        },
        // 创建Vue对象的时候,在Vue对象的一个参数,这个参数是对象形式的,在对象内声明一个components属性,在它的内部进行局部注册组件
        // 对于components对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
        components:{
            test:{
                // 把test组件声明成对象的形式,使用template属性进行模板的赋值 
                template:"<h2>h2...</h2>"
                // 使用methods去声明组件的方法,使用data声明局部组件的数据
            }
        }
    });
   

3. 注意局部注册的组件在其子组件中不可用。

模块注册

第14节 单文件组件

非模块组件的缺点

1. 全局定义 (Global definitions)强制要求每个 component 中的命名不得重复
2. 字符串模板 (String templates)缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
3. 不支持 CSS (No CSS support)意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤 (No build step)限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

使用Vue.js的单文件组件准备工作

1. 安装npm:
   • npm全称为Node Pakeage Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器
   • 通过安装Node.js就可以完成npm的安装
   • npm -v
2. 由于网络原因安装cnpm
   • npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装vue-cli
   • cnpm install -g @vue/cli
4. 安装webpack
   • cnpm install -g webpack
   • webpack是JavaScript打包器（module bundler）

使用webpack和browserify等构件工具

总结

• 第12节 组件基础
  1. 什么是组件？
  2. 为什么需要封装组件？
  3. 怎样创建一个组件？
  4. 怎样监听组件事件？
• 第13节 组件注册
  1. 组件如何命名？
  2. 怎样全局注册组件？
  3. 怎样局部注册组件？
• 第14节 单文件组件
  1. 全局组件和局部组件的缺点有哪些？
  2. 怎么解决这些问题呢？需要哪些准备工作？