Vue自定义组件及组件的注册方法

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过Vue.component全局注册的：

Vue.component('component-name', {
  // ... options ...
})

该组件名Vue.component就是的第一个参数。

注册分为全局注册和局部注册：

1.全局注册：

全局注册的组件可以用在其被注册之后的任何 (通过new Vuew({ })) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

<script>
    Vue.component("jishuqi",{
        data:function () {
                return {
                    count:0
                }
        },
        template:'<button v-on:click="count+=1">点击了{{count}}次</button>'
    })

  Vue.component("jishuqi2",{}）
  Vue.component("jishuqi3",{}）
  Vue.component("jishuqi4",{}）

 var v=new Vue({
        el:"#pp"
    })
</script>

<div id="pp">
    <jishuqi></jishuqi>
    <jishuqi2></jishuqi2>
    <jishuqi3></jishuqi3>
    <jishuqi4></jishuqi4>
</div>

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

2.局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在conponents 选项中定义你想要使用的组件：

new Vue({
  el: '#app'
  components: {
    'jishuqi1': Jishuqi1,
    'jishuqi2': Jishuqi2,
    'jishuqi3': Jishuqi3
  }
})

对于components对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。

如果你希望 Jishuqi1 在 Jishuqi2 中可用，则你需要这样写：

var Jishuqi1 = { /* ... */ }

var Jishuqi2 = {
  components: {
    'jishuqi1': Jishuqi1
  },
  // ...
}

Vue自定义组件及组件的注册方法

猜你喜欢