Vue学习笔记----组件

组件

组件初始化

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: 'You clicked me {{ count }} times.'
})

子组件传值

子组件中如何引用data中的属性

Vue.component('blog-post', {
  props: ['post'],
  template: `
    

      
{{ post.title }}
      

    
  `
})

> props定义在子组件中用到的属性，通过v-bind绑定data属性到子组件  

子组件事件

//子组件事件
//子组件向上传递事件名称

  Enlarge text

//父组件监听

子组件向上传递参数
当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值

  Enlarge text



或者，如果这个事件处理函数是一个方法：


那么这个值将会作为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}

组件上v-model的使用

组件上v-model的使用是借助v-bind和v-on的结合

Vue.component('custom-input', {
  props: ['value'],
  template: `
    
  `
})

插槽

  Something bad happened.//插入插槽的内容


Vue.component('alert-box', {
  template: `
    

      Error!
      
    
  `
})

//定义alert-box组件，slot是vue提供的插槽