Vue 组件

因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件的复用

你可以将组件进行任意次数的复用:

<div id="components-demo">
 <button-counter></button-counter>
 <button-counter></button-counter>
 <button-counter></button-counter>
</div>

data 必须是一个函数

一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:

data: function () {
  return {
    count: 0
  }

这里有两种组件的类型:全局组件和局部组件。

//全局注册
Vue.component('my-component-name', {
  // ... options ...
})

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中:

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

我们可以使用 v-bind 来动态传递 prop。

组件之间的传值

1.父给子传:用属性传;
2子给父传:用事件传(方法);
3同级之间传值:用中间量传;

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、什么是组件(Component)? 组件(Component)是Vue.js最强大的功能之一。组件可以扩展HT...
    廖马儿阅读 24,434评论 1 4
  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,883评论 5 14
  • 组件注册 组件名 在注册一个组件的时候,我们始终需要给它一个名字。 该组件名就是Vue.component的第一个...
    oWSQo阅读 418评论 0 1
  • 推荐我的vue教程:VUE系列教程目录 上篇讲解了vue-router路由入门,现在讲讲关于vue组件的内容。如果...
    侬姝沁儿阅读 2,371评论 6 20
  • 1. 组件 a. 什么是组件 组件化开发 我们可以很直观的把一个复杂的页面分割成若干个独立的组件,每个组件包含...
    goodluckall阅读 153评论 0 0