组件化的概念/特性/优点,Vue组件的使用

时间: 2017-12-29阅读: 9640标签: vue

组件化的概念

Web 中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘、键盘、鼠标),它是一个具有独立的逻辑和功能或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用,页面就是有一个个类似这样的部分组成,比如导航、列表、弹窗、下拉菜单等。页面只不过是这些组件的容器,组件自由组合形成功能完善的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行。

组件化的特性

  1. 高内聚性,组建功能必须是完整的,如我要实现下拉菜单功能,那在下拉菜单这个组件中,就把下拉菜单所需要的所有功能全部实现。
  2. 低耦合度,通俗点说,代码独立不会和项目中的其他代码发生冲突。在实际工程中,我们经常会涉及到团队协作,传统按照业务线去编写代码的方式,就很容易相互冲突,所以运用组件化方式就可大大避免这种冲突的存在、
  3. 每一个组件都有子集清晰的职责,完整的功能,较低的耦合便于单元测试和重复利用。

组件化的优点

  • 提高开发效率
  • 方便重复使用
  • 简化调试步骤
  • 提升整个项目的可维护性
  • 便于协同开发

Vue中的组件

vue 中的组件是一个自定义标签形式,Vue.js的编译器为它添加特殊功能;
vue也可以扩展原生的html元素,封装可重用的代码。

vue组件的构成

  • 样式及结构
  • 行为逻辑
  • 数据

注册组件

  • 组件注册必须在指定实例之前执行。
  • 建议将组件提取出来放在单独js文件中,按需引用

全局注册

可以在任何模版中使用,使用之前必须先注册

  • 语法: Vue.component(tagName, options)
  • 命名约定: “驼峰”格式,或者“烤串”格式, 组件引用名必须一致
  • Exp:
<custom-select></custom-select>
Vue.component("custom-select", {
    template: `<section>
        <section>
            <section>
                <input type="text" />
                <input type="button" value="Go" />
                <span></span>
            </section>
            <ul>
                <li>111111</li>
                <li>2222</li>
                <li>3333</li>
                <li>4444</li>
                <li>5555</li>
                <li>6666</li>
            </ul>
        </section>
    </section> `,
});

局部注册

通过使用组件实例选项注册,可以使组件仅在另一个指定实例/组件的作用域中可用

new Vue({
    el: '#app',
    //组件队列
    components: {
        //组件名称
        "custom-select": {
            template: `<section>
                        <section>
                            <section>
                                <input type="text" />
                                <input type="button" value="查询" />
                                <span></span>
                            </section>
                            <ul>
                                <li>111111</li>
                                <li>2222</li>
                                <li>3333</li>
                                <li>4444</li>
                                <li>5555</li>
                                <li>6666</li>
                            </ul>
                        </section>
                    </section>`
        },
        "test-dom": {
            template: `<p>测试文字</p>`
        }
    }
});

也可以将组件对象抽离用一变量缓存出来,如下:

var Temp = {
    template: `<section>
                        <section>
                            <section>
                                <input type="text" />
                                <input type="button" value="查询" />
                                <span></span>
                            </section>
                            <ul>
                                <li>111111</li>
                                <li>2222</li>
                                <li>3333</li>
                                <li>4444</li>
                                <li>5555</li>
                                <li>6666</li>
                            </ul>
                        </section>
                    </section>`
};

new Vue({
    el: "#app",
    components: {
        // <custom-select> 将只在父模板可用
        'custom-select': Child,
    }
});

组件间的通信

父组件要给自组件传递数据,子组件需要将它内部发生的事情告知给父组件。

组件中的数据

组件中的数据必须是函数, 如果它们共用一个对象,在更改其中一个组件数据时,也会影响到其它的组件。

换做函数形式,每个组件都能够有自己独立的数据,从而不会影响到其它的组件,有点像解耦的概念。


组件信息传递
传递情况
父组件 =>子组件 1. 在父级组件上使用自定义属性绑定数据; 2.使用props声明自定义属性名
子组件 =>父组件 1. 在父级组件上绑定自定义事件v-on监听自定义事件;2. 使用$emit()触发父组件所关心的自定义事件。

父组件 =>子组件

组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。

可以在组件上使用自定义属性绑定数据,在组件中需要显式的用选项参数props声明自定义属性名。

子组件 =>父组件

需要用到自定义事件,父组件用$on监听自定义事件,使用$emit()触发父组件所关心的自定义事件。

Code

<custom-select btn-value="查询" :list="list1"></custom-select>
<custom-select btn-value="搜索" :list="list2"> </custom-select>
// 父组件
Vue.component("custom-select", {
    /*
       !此处数据类型必须是一个函数形式,不能直接写对象。
        每个组件都是相互独立的,如果它们共用一个对象,在更改一个组件数据的时候,会影响到其它
        组件,如果是函数的话,每个组件就都有自己的独立数据,相互之间不会影响。
    */
    data: function() {
        return {
            selectShow: false,
            val: ""
        };
    },
    props: ["btnValue", "list"],
    template: `<section>
                    <section>
                        <section>
                            <input type="text" :value="val"  @click="selectShow=!selectShow"/>
                            <input type="button" :value="btnValue" />
                            <span></span>
                        </section>
                        <custom-list v-show="selectShow" :list="list"  @receive="changeValueHandle"></custom-list>
                    </section>
                </section>`,
    methods: {
        changeValueHandle(value) {
            this.val = value;  //将选中的值赋给指定的input 
            this.selectShow = false;  //隐藏下拉框
        }
    }
});


// 子组件
Vue.component("custom-list", {
    props: ["list"],
    template: `
            <ul>
                <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
            </ul>`,
    methods: {
        selectValueHandle(item) {
            //在子组件中触发,需要一个自定义事件
            // Key值 是父级的自定义事件
            this.$emit("receive", item);
        }
    }
});

new Vue({
    el: '#app',
    data: function() {
        return {
            list1: ["北京", "上海", "广州", "深圳"],
            list2: ["2017-2-25", "2017-2-26", "2017-2-27", "2017-2-28"],
        };
    }
});

特殊属性is

Vue是在浏览器解析和标准化HTML后才获取模版内容,某些不符合W3C标准的dom结构最终会被错误解析。

通过使用is来扩展HTML标签功能可以解决。

<tabel>
    <tr is="custom-select"></tr>
</tabel>

作者:我是白夜
链接:https://www.jianshu.com/p/e805baa1574e
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/293

Vue 的 .sync 修饰符

.sync 修饰符算是 Vue 的所有修饰符中较难理解的一个,本篇文章就带你走近 .sync 的世界,深入理解后会发现,其实也就那么回事。修饰符和指令息息相关,下面从 指令 -> 修饰符 -> .sync 修饰符 由浅入深地来讲解 .sync 的含义及用法。

vue中is的作用和用法

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

一点 Vue.observable 想法

Vue 2.6.0 新增了 Vue.observable api,但最近才去尝试使用它。这东西说新也不新,因为他就是 vue 本身的功能,只是暴露出来,成为新 api 了。在老版本中,直接用 new Vue({ data: {} }) 也一样。

Vue中props知识点

如果你一直在阅读有关\\\"props\\\"内容,你会发现我们可能也一直在使用它们(即使没有意识到),但也许你并不完全确定它们是什么。或者如何正确使用它们,并充分利用它们。

12种使用Vue的最佳做法

随着 VueJS 的使用越来越广泛,出现了几种最佳实践并逐渐成为标准。在本文中,主要分享在平时开发中一些有用资源和技巧,废话少说,我们开始吧。

如何理解vue中的v-bind?

若不是动态属性,首先为其增加驼峰化后的监听,然后再为其增加一个连字符的监听,例如v-bind:foo-bar.sync,首先v-on:update:fooBar,然后v-on:update:foo-bar。v-on监听是通过addHandler加上的。

Vue.use到底是什么?

我们在使用Vue做项目开发的时候,看到不少轮子都是通过Vue.use来进行使用,感觉甚是高大上。不过Vue.use到底是什么鬼?不妨来看个究竟。

Vue.js最佳实践:五招让你成为Vue.js大师

本文面向对象是有一定Vue.js编程经验的开发者。如果有人需要Vue.js入门系列的文章可以在评论区告诉我,有空就给你们写。对大部分人来说,掌握Vue.js基本的几个API后就已经能够正常地开发前端网站

vue介绍

库是一种插件,是一种封装好的特定方法的集合。提供给开发者使用,控制器在使用者手里。框架是一套架构,会基于自身特定向用户提供一套相当完整的解决方案,控制权在框架本身

vue有时候你不需要 $emit & $on

在此之前,子组件到父组件的传递事件我一般还是使用 $emit 和 $on,因为这个操作理解起来并不难,代码一般也挺清晰。不过今天遇到这么个情况 ——

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广