vue组件(全局注册、局部注册)

vue组件使用

1、认识组件
(1) 创建组件的写法
写法： Vue.component("组件名",{ //xx }); //这里是全局注册组件的写法
Vue.component()函数的第一个参数就是组件名，
比如Vue.component(“my-comname”,{ //xx}}); 那么my-comname就是新建组件的名称；

（2）定义组件名的方式：

• 使用 kebab-case(短横线分隔命名)
  写法：Vue.component('my-component-name', { //xx })
  当使用这种方式定义一个组件时，在引用这个自定义元素时也必须使用kebab-case，
  比如<my-component-name>。

• 使用 PascalCase(首字母大写命名)
  写法：Vue.component('MyComponentName', { //xx })
  当使用这种方式定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
  即<my-component-name> 和 <MyComponentName> 都可以。
  注意：直接在DOM(即非字符串的模板)中使用时只有kebab-case是有效的。

（3）注意：

• 为了能在模板中使用，这些组件必须先注册以便 Vue能够识别；
• 当直接在DOM中使用一个组件(而不是在字符串模板或单文件组件)的时候，建议遵循W3C规范中的自定义组件名(字母全部小写且必须包含一个连字符)，避免和当前以及以后的HTML元素相冲突。
• 有两种组件的注册类型：全局注册和局部注册。
  我们的组件都是通过 Vue.component 全局注册的。
  全局注册的组件可以用在它被注册之后的任何(通过new Vue)新创建的Vue根实例，
  也包括其组件树中的所有子组件的模板中。
• 组件是可复用的 Vue 实例，且带有一个名字。

<div id="app">
    <button-counter></button-counter>
    <hr>
    <div id="dv" style="width:200px;height:200px;background-color:lightblue;">
        <button-counter>我是#dv下的组件</button-counter>
    </div>
</div>

    <script src="js/vue.js"></script>
    <script>
        // 创建组件button-counter
        Vue.component('button-counter', {
   
            data: function () {
   
                return {
   
                    count: 0
                }
            },
            template: '<button v-on:click="count++">你点了{
   {count}}次</button>'
        });

        /*  本例的组件名字是<button-counter>。我们可以在一个通过new Vue创建的Vue根实例中，
            把这个组件作为自定义元素来使用。 */
        new Vue({
   
            el: '#app'
        });
    </script>

2、组件复用
组件的复用：组件可进行任意次数的使用。
注意：

• 每一个组件的data，必须是一个函数；

• 每用一次组件， 就会有一个它的新实例被创建，组件之间不会相互影响。