Vue组件的理解

什么是组件呢?组件就是component

Vue.component('button-counter', {                //全局组件
  data: function () {              //组件的选项
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'   //模板
})

组件是可以复用的Vue实例,带有名字,也可以说是一个自定义元素

<button-counter>     </button-counter>

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

这说明了组件就是一个Vue实例也不为过,但是他可以以自定义元素的方式去加入HTML文档

Prop

prop其实就是代表你可以接收的属性,一般用props声明你要接收的属性,然后在自定义元素的时候就可以传入那个值变为属性,一般来说我们会在组件内的模板里用上这个要接收的属性,然后在组件当成自定义元素使用时就能加入并更改这个属性。

具体例子请看

Vue.component('blog-post', {
  props: ['title'],                  //声明我会接收title的值,然后把他化为属性
  template: '<h3>{{ title }}</h3>'         //把将要接收的属性先渲染
})
<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>
                 ↑这个就是我们要接收的属性了,他类似于直接加入组件里的data选项,所以可以跟模板里的{{title}}渲染

让我们来看看更加明细的例子

JS部分:
Vue.component('blog-post', {
  props: ['title'],             //声明要接收的属性
  template: '<h3>{{ title }}</h3>'
})

HTML部分:
<blog-post title="My journey with Vue"></blog-post>      //可以看见我们使用了组件,然后传入了title属性

上面这部分相当于

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>',
  data:{title:'My journey with Vue'}       //就类似于加入了data中
})

我们可以使用v-bind动态绑定属性

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值