目录
组件是指网页上的某一部分,当我们做的网页很大的时候,我们可以把一个大型的网页拆成几个部分。每一个组分就是一个小的组件,这个每个组件维护就简单多了。
我们需要学习如何定义组件、组件之间如何通讯
上章例子中的li数据展示只是简单的部分,如果数据展示或关系变得复杂的时候就要抽离出来变成一个单独的组件。
一、全局组件定义
1.1 说明
组件是可复用的 Vue 实例,且带有一个名字。
在注册一个组件的时候,我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了:
Vue.component(
'my-component-name'
, {
/* ... */
})
该组件名就是 Vue.component
的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
1.2 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue test</title>
<script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="note"/>
<button v-on:click="myClick">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
template: '<li>item</li>'
})
new Vue({
el: "#root",
data: {
note: '',
list: []
},
methods: {
myClick: function (){
this.list.push(this.note)
this.note=''
}
}
})
</script>
</body>
</html>
效果:
二、组件名大小写
定义组件名的方式有两种:
使用 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 是有效的。
三、局部组件
3.1 定义
全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
3.2 例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue test</title>
<script src="static/js/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input v-model="note"/>
<button v-on:click="myClick">提交</button>
</div>
<ul>
<todo-item></todo-item>
</ul>
</div>
<script>
const TodoItem = {
template: '<li>item</li>'
};
new Vue({
el: "#root",
data: {
note: ''
},
components: {
'todo-item': TodoItem
}
})
</script>
</body>
</html>
运行效果: