Q1:什么是组件？
组件是可复用的Vue实例，且带有一个名字（内心os：不就是可重复使用的Vue实例么...)
Q2: 为什么要使用组件？
为了提高代码的复用性 (内心os: 这应该和函数封装是一个道理吧....)
Vue组件示例
<!-- html中的内容,把 my-component 这个组件作为自定义元素来使用-->
<div id="component-demo">
<my-component></my-component>
</div>
<script>
// 定义一个名为 my-component 的新组件
Vue.component('my-component',{
data: function(){
return {
count: 0
}
},
template: ' <button v-on:click="count++">你点击了{{count}}次</button>'
})
// 我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
new Vue({el:'#component-demo'})
</script>
总结：
- 注册一个自定义的组件
- 通过 new Vue创建 Vue 实例，并将实例挂载到DOM上
- 在对应的 html 中将自定义的组件作为自定义元素来使用
Q3: 组件只有注册了才能被Vue识别，那组件注册的类型有哪些呢？
有两种组件注册类型：局部注册和全局注册
- 全局注册：全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
<div id="app">
<my-comp></my-comp>
</div>
Vue.component('my-comp',{
template:'<h3>我是新出炉的组件</h3>'
})
new Vue({
el: "#app",
data: {
}
})
- 局部注册：局部注册的组件在其子组件中不可用
<div id="app">
<my-comp></my-comp>
</div>
new Vue({
el: "#app",
components:{
'my-comp':{template:'<h3>我是新出炉的组件</h3>'}
},
data: {
}
})
Q4: 组件的名字有什么讲究么？
答案是当然有了
Vue.component('my-component-name', { /* ... */ })
- 在注册一个组件的时候，我们始终需要给它一个名字,该组件名就是
Vue.component的第一个参数 - 定义组件名的方式有两种： kebab-case 和 PascalCase
- 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
- 当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
组件使用的奇淫技巧
- 推荐使用小写字母加进行命名（必须） child, mycomponnet命名组件
- template中的内容必须被一个DOM元素包括 ，也可以嵌套
- 在组件的定义中，除了template之外的其他选项—data,computed,methods
- data必须是一个方法
网友评论