vue学习笔记の实现select组件

可以理解为页⾯的⼀部分，其具有独⽴的逻辑及功能或界⾯，同时⼜能与其他部分进⾏相应地融合，变成完整的应⽤。页⾯可以由这样⼀个个的组件构成，如导航栏、列表项、弹窗、侧边栏、下拉框、多选框等。页⾯相当于⼀个⼤的框架，将这些组件组合成⼀个功能更为强⼤的模块，组件⽅便被替换或删除，⽽不影响整个应⽤程序的运⾏。 前端组件化的思想： 将⼤的东西拆成⼀个个的⼩东西，然后完成⼩东西的功能，最后再将这些⼩东西进⾏组合，得到最初想要的模样，即分⽽治之的思想。 使⽤组件的优势： 提⾼开发效率；可重⽤；简化调试步骤；便于协同开发；提升整个项⽬的可维护性。2—vue中的组件

Vue中的组件是⼀个⾃定义标签，vue.js的编辑器为其添加特殊功能；vue也可以扩展原⽣的html元素，封装可重⽤的代码。组件的基本组成：样式结构、⾏为逻辑、数据3—注册组件

全局注册： 可以在任何模板中使⽤，使⽤前先注册。语法：使⽤Vue.component（组件名，选项对象）

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

在html中使⽤组件：使⽤kebab-case命名法 eg. 注册：Vue.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标签功能。

核⼼代码：

结果：

licecap使⽤还是失败啊，继续努⼒。。。。。。原来是⾃⼰屏幕放⼤的原因啊。。。