vue component html,Vue Component 总结

vue的component思想允许我们复用UI组件，减少功能重复的代码。通过对html和样式文件以及js文件的封装，使其成为一个具有独立功能的小插件；用户可以通过自定义的标签调用这个插件。

本文简单介绍component的基本用法，结合在开发过程中的具体应用场景进一步举例说明，方便大家理解。

正文开始：

使用自定义的component，首先需要创建一个component，并且将其注册到Vue的作用域中，之后，我们就可以使用自定义的组件了。

//component 声明与注册

Vue.component('my-component', {

template:'

Hello vue component!

'

})

// 创建根实例

newVue({

el:'#app'

})

注册之后，我们可以在html中使用自定义的component了：

注意：组件命名的方式，在js和html中的转换。

渲染后的结果为：

Hello vue component!

以上是对静态资源的封装；而通常使用component的情例如景是将动态的数据，与html模板进行封装，形成一个独立并且可复用的组件。例如菜单栏，表格插件，分页插件。下面以常见的菜单栏进行说明：

这个菜单组件需要满足以下几点要求：

1、用户可以使用vue-menu标签调用该组件

2、菜单中的目录内容是动态渲染的

既然需要动态渲染子目录，需要开发人员定义渲染的数据，因此，采用props进行“父组件”向“子组件”的消息传输。

首先先要明白父组件与子组件的含义：在component中，自定义标签称为父标签，而封装其中的html称为子标签。因此，可以说props完成数据从封装好的外部组件向内部html渗入的过程。

先上代码：

menu.vue

{{item.name}}

export default{

name:"vueMenu",

props:["menu"],

}

main.vue

import vueMenu from "../../components/menu.vue"

export default{

name:"App",

components: {

vueMenu

},

data(){

return{

menu:[

{name:"系统管理",link:"sys"}

{name:"系统管理",link:"sys"}

{name:"系统管理",link:"sys"}

]

}

}

}