vue学习笔记の实现select组件

Posted 艳阳天

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue学习笔记の实现select组件相关的知识,希望对你有一定的参考价值。

     通过这几天的学习,初步实现了自定义的选择下拉框组件,其中,可以把下拉选项抽离出来作为子组件,整个组件为父组件,其主要由<div>、<input>、<custom-select>、<ul>、<li>等标签构成基本的选择组件页面结构。主要的功能项:输入框及button按钮,构成初次展现的页面,通过点击输入框按钮,下拉列表选择项出现,当点击选择项中的某一项内容时,输入框中会出现相应的内容,再点击输入框,下拉选择项列表隐藏。同时,通过父组件与子组件之间的自定义属性及自定义事件的交互,实现父子组件间的数据交互。

      用到的相关知识点:

1--组件

      可以理解为页面的一部分,其具有独立的逻辑及功能或界面,同时又能与其他部分进行相应地融合,变成完整的应用。页面可以由这样一个个的组件构成,如导航栏、列表项、弹窗、侧边栏、下拉框、多选框等。页面相当于一个大的框架,将这些组件组合成一个功能更为强大的模块,组件方便被替换或删除,而不影响整个应用程序的运行。 前端组件化的思想: 将大的东西拆成一个个的小东西,然后完成小东西的功能,最后再将这些小东西进行组合,得到最初想要的模样,即分而治之的思想。 使用组件的优势: 提高开发效率;可重用;简化调试步骤;便于协同开发;提升整个项目的可维护性。

2—vue中的组件

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

组件的基本组成:样式结构、行为逻辑、数据

3—注册组件

全局注册: 可以在任何模板中使用,使用前先注册。

语法:使用Vue.component(组件名,选项对象)

其中,Vue是构造函数,component是其下的方法。组件名命名规则:camelCase、kebab-case

在html中使用组件:使用kebab-case命名法 eg. 注册:Vue.component(’my-component’,{}) 使用:<my-component<</my-component>

局部注册: 在组件实例中通过选项对象注册,只在所注册的作用域中使用 { components:{ 组件名:选项对象 } }

4--组件间通信:

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

父组件->子组件:

      组件实例的作用域是孤立的,不能在子组件直接用父组件的数据。 父组件向子组件传递数据时,可以在组件上使用自定义属性绑定数据,在组件中需要显示的

用props声明自定义属性。

子组件->父组件:

      子组件向父组件传递数据时,需要用到自定义事件,父组件用$on监听自定义事件,$emit触发父组件所关心的自定义事件。父组件用v-on用来监听子组件的

事件是否触发了来作出相应的处理。

ps:父组件通过props向下传递数据给子组件,子组件通过events给父组件传递消息。父组件通过自定义属性向子组件传递时,需要显示声明props:["attrName"]。

子组件通过$emit(event,[...args])方法触发当前实例上的事件,把事件沿着作用域链向上传递,直到父组件接收到该事件作出相应反应。 

5—组件中的data必须是函数

     每个组件是相互独立的,如果它们共用一个对象,在更改一个组件数据的时候,会影响其他组件。如果是函数的话,每个组件都会有自己独立的数据,相互之间

不会影响。

6—受限制的元素

DOM模板解析:

    vue是在浏览器解析和标准化html后才获取模板内容,所以有些元素限制了能被它包裹的元素。如ul里只能放li 某些元素中放入了自定义属性,不符合W3C标准,

会解析错误。

变通的方式:使用特殊属性is来扩展HTML标签功能。

 

 

核心代码:以上是关于vue学习笔记の实现select组件的主要内容,如果未能解决你的问题,请参考以下文章

vue学习笔记—— 组件化实现todoList

Vue第三天学习笔记之组件化开发

Vue学习笔记入门篇——组件的内容分发(slot)

Vue第四天学习笔记之组件化高级

Vue 学习总结笔记

Vue 学习笔记