Vue Component 总结

vue的component思想允许我们复用UI组件，减少功能重复的代码。通过对html和样式文件以及js文件的封装，使其成为一个具有独立功能的小插件；用户可以通过自定义的标签调用这个插件。
本文简单介绍component的基本用法，结合在开发过程中的具体应用场景进一步举例说明，方便大家理解。

正文开始：

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

//component 声明与注册
Vue.component('my-component', {

template:'<div>Hello vue component!</div>'

})

// 创建根实例

newVue({

el:'#app'

})

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

<div id="#app">
<my-component></my-component>

注意：组件命名的方式，在js和html中的转换。
渲染后的结果为：

<div id = "#app">
  <div>
    Hello vue component!
  </div>
</div>

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

1、用户可以使用vue-menu标签调用该组件
2、菜单中的目录内容是动态渲染的

既然需要动态渲染子目录，需要开发人员定义渲染的数据，因此，采用props进行“父组件”向“子组件”的消息传输。
首先先要明白父组件与子组件的含义：在component中，自定义标签称为父标签，而封装其中的html称为子标签。因此，可以说props完成数据从封装好的外部组件向内部html渗入的过程。

先上代码：

menu.vue
<template>
    <div class="ui vertical inverted sticky menu fixed top" id="menu">
        <template v-for="item in menu">
            <router-link :to="item.link" class="item">{{item.name}}</router-link>
        </template>
    </div>
</template>

<script>
    export default{
        name:"vueMenu",
        props:["menu"],
    }
</script>

main.vue
<template>
    <div class="wrapper">
        <vue-menu :menu="menu"></vue-menu>
    </div>
</template>

<script>
    import vueMenu from "../../components/menu.vue"
    export default{
        name:"App",
        components: {
            vueMenu
        },
        data(){
            return{
                menu:[
                    {name:"系统管理",link:"sys"}
                    {name:"系统管理",link:"sys"}
                    {name:"系统管理",link:"sys"}
                ]
            }
        }
    }
</script>

最后编辑于：2018.01.15 19:42:46