发表于： 2019-07-18 21:36:50
1 898
今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
明天计划的事情：（一定要写非常细致的内容）
遇到的问题：（遇到什么困难，怎么解决的）
收获：（通过今天的学习，学到了什么知识
1.基本示例
一个Vue组件的示例：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', { data: function () { return { count: 0
}
}, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter></button-counter></div>
new Vue({ el: '#components-demo' })
2.组件的复用
可以将组件进行任意次数的复用：
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter></div>
每个组件都会各自独立维护。因为你每用一次组件，就会有一个它的新实例被创建。
一个组件的 data 选项必须是一个函数：
data: function () { return { count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例
3.组件的组织
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component('my-component-name', { // ... options ...
})
4.通过 Prop 向子组件传递数据
Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>'
})
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：
<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>
5.单个根目录
当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：
<h3>{{ title }}</h3>
最最起码，你会包含这篇博文的正文：
<h3>{{ title }}</h3>
<div v-html="content"></div>
返回列表
评论