Vue.js组件

Vue.js 组件

1、全局组件生成（所有的Vue实例都可以使用）
语法构成：Vue.component(tagName, options)
解读： 其中tagName为组件名，options为组件的一些配置选项。注册成功后，我们可以直接调用组件。
好处： 通用的组件，可以自己写好供其他人使用，避免重复造轮子，提升开发效率。
eg:

组件声明：

new  Vue.component(‘peter’, {
    template: ‘<h1>peter自定义组件</h1>’
})
</script>

组件使用
<peter></peter>

疑问？ 如何向组件中传入指定的内容呢？

2、局部组件（仅当前的Vue实例可以使用）
注意局部组件的声明是在Vue实例中声明的，故仅对当前实例生效。类比成函数内的局部变量，仅在当前函数内可用，一旦超出作用域就不可使用了。

<script>
//组件内容定义
var Child = {
    template: ‘<h1>peter自定义的组件</h1>’
}

new Vue: ({
    el： ‘#app’,
        //组件声明
    components:  {
        ‘peter’: Child

    }
})
<script>


组件使用：
<peter></peter>