组件化开发
- 组件系统是 Vue 的另一个重要概念
- 意类型的应用界面都可以抽象为一个组件树
- 也就是说项目都是一个个的组件构成的
- 我们使用小型、独立和通常可复用的组件构建大型应用。
- 这是一种开发的理念，组件化开发，
第一个组件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
new Vue({el: '#components-demo'})
</script>
</body>
</html>
组件的名字
- 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是
组件的注册
- Vue.component('button-counter', {})
组件的使用
- 我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
组件的选项
- 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项
- 例如 data、computed、watch、methods 以及生命周期钩子等。 所以组件可以使用vue的选项的
组件的复用
- 你可以将组件进行任意次数的复用
- 注意当点击按钮时，每个组件都会各自独立维护它的 count。
- 因为你每用一次组件，就会有一个它的新实例被创建。这一点要好好理解，这是独立的
组件的data选项
- data 必须是一个函数
- 当我们定义这个
组件时，你可能会发现它的 data 并不是像这样直接提供一个对象 - 比如 data = {count:0} 注意这是一个对象大括号定义的
- 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
- 所以为什么是一个函数，就是为了组件复用的时候数据独立
- 如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：
组件的实际应用场景
- 你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
- 所以组件是可以再套组件的，
组件的注册
- 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别
- 两种组件的注册类型：全局注册和局部注册。
- 上面我们也看到了组件的注册 这种就是全局注册
Vue.component('my-component-name', {
// ... options ...
})
第二个组件示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<div id="components-demo2">
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
</div>
<script>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
});
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
});
new Vue({el: '#components-demo'});
new Vue({
el: '#components-demo2',
data: {
posts: [
{id: 1, title: 'My journey with Vue'},
{id: 2, title: 'Blogging with Vue'},
{id: 3, title: 'Why Vue is so fun'}
]
}
})
</script>
</body>
</html>
- 通过 Prop 向子组件传递数据
- 这个数据传递是非常重要的，组件里面的内容不能写死，要注册使用的传递进去，否则组件就没有意义了
- 1，组件可以注册多个，都是不影响的
- 2，组件传递数据，使用的props，很明显可以传递多个值，
- 3，template，这个现在是写在注册的地方，但是内容一多，也很明显，是不能写到这个地方的，要单独文件
- 4，我们可以使用 v-bind 来动态传递 prop，所以这个地方不是在绑定属性，还是在动态传递值
我们的博文不只需要标题和内容，还需要发布日期、评论等等。为每个相关的信息定义一个 prop 会变得很麻烦
所以是时候重构一下这个 <blog-post> 组件了，让它变成接受一个单独的 post prop：
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
></blog-post>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
- 子单元通过 prop 接口与父单元进行了良好的解耦
- 在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理。
- 我认为这个组件后面要重点理解学习，现在还是不理解，