频道导航

• ▸ PHP
• ▸ Java
• ▸ Java SE
• ▸ Python
• ▸ C#
• ▸ C&C++
• ▸ Ruby
• ▸ VB
• ▸ asp.Net
• ▸ Go
• ▸ Perl
• ▸ netty
• ▸ Django
• ▸ Delphi
• ▸ Jsp
• ▸ .NET Core
• ▸ Spring
• ▸ Flask
• ▸ Springboot
• ▸ SpringMVC
• ▸ Lua
• ▸ Laravel
• ▸ Mybatis
• ▸ Asp
• ▸ Groovy
• ▸ ThinkPHP
• ▸ Yii
• ▸ swoole
• ▸ HTML
• ▸ HTML5
• ▸ JavaScript
• ▸ CSS
• ▸ jQuery
• ▸ Bootstrap
• ▸ Angularjs
• ▸ TypeScript
• ▸ Vue
• ▸ Dojo
• ▸ Json
• ▸ Electron
• ▸ Node.js
• ▸ extjs
• ▸ Express
• ▸ XML
• ▸ ES6
• ▸ Ajax
• ▸ Flash
• ▸ Unity
• ▸ React
• ▸ Flex
• ▸ Ant Design
• ▸ Web前端
• ▸ 微信小程序
• ▸ 微信公众号
• ▸ iOS
• ▸ Android
• ▸ Swift
• ▸ Hybrid
• ▸ Cocos2d-x
• ▸ Flutter
• ▸ Xcode
• ▸ Silverlight
• ▸ cocoa
• ▸ Cordova

• 前端之家
• Vue
• Vue实现自定义下拉菜单功能

@H_404_0@考虑到一些朋友想要css代码，但避免css占据太多位置，所以此处将css压缩了，如果不需要看css的可以直接跳过哈

@H_404_0@

用到的知识点总结：

@H_404_0@组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

@H_404_0@

使用组件：先要注册组件

@H_404_0@

一、注册组件：分为全局注册和局部注册

@H_404_0@

全局注册：

@H_404_0@•可以在任何模板中使用，使用之前要先注册

@H_404_0@语法：使用Vue.component(组件名,选项对象) 组件名命名约定：

@H_404_0@•驼峰：(camelCase)、烤串(kebab-case)

@H_404_0@在html中使用组件：

@H_404_0@•使用烤串（keba-case）命名法

@H_404_0@注意：即便我们的组件名是驼峰的形式，在html中也要使用的烤串命名法，不要使用驼峰方式，否则会报错

@H_404_0@

局部注册：

@H_404_0@在组件实例中通过选项对象注册，只在所注册的作用域中使用

@H_404_0@

二、组件中data必须是函数

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

@H_404_0@

三、组件间通信

@H_404_0@父组件要给子组件传递数据，子组件需要将它内部发生大的事情告知给父组件

@H_404_0@•父组件->子组件

@H_404_0@组件实例的作用域是孤立的，不能在子组件直接用父组件的数据 可以在组件上使用自定义属性绑定数据，在组件中需要显式的用props声明自定义属性名

@H_404_0@•子组件->父组件

@H_404_0@需要用到自定义事件，父组件用$on监听自定义事件，$emit触发父组件所关心的自定义事件

@H_404_0@针对这一节的学习，如果您理解的不是特别的好，推荐看官网

@H_404_0@

总结

@H_404_0@以上所述是小编给大家介绍的Vue实现自定义下拉菜单功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。