我要评论组件注册
组件名
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
自定义组件名 (字母全小写且必须包含一个连字符)。推荐
组件名大小写
定义组件名的方式有两种：
-
使用kebab-case
Vue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
<my-component-name>。 -
使用PascalCase
Vue.component('MyComponentName', { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说
<my-component-name>和<MyComponentName>都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
因此，强烈推荐使用kebab-case。
全局注册
我们只用过 Vue.component 来创建组件：
Vue.component('my-component-name', {
// ... 选项 ...
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
局部注册
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
<script>
let componentA = {
template: `<h1>componentA</h1>`
}
let componentB = {
template: `<h1>componentB</h1>`
}
let componentC = {
components: {
'com-a': componentA
},
template: `<h1>componentC<com-a></com-a></h1>`
}
let vm = new Vue({
el: '#app',
data: function () {
return {}
},
components: {
'component-a': componentA,
'component-b': componentB,
'component-c': componentC
}
})
</script>
本文地址：https://blog.csdn.net/FrequencyStar/article/details/107898142
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论