Vue - 组件

通常一个应用会以一棵嵌套的组件树的形式来组织

1.定义全局组件

Vue.component('组件名',{
      props:[], //获取父组件值
      //定义属性
      data(){
          return {
                //属性定义
          }
      },
      //模版
      template:`按照格式书写html,多行书写`
})
注：组件命名,一般使用,短横线分隔命名,首字母小写,
注：data()必须是一个函数,父组件调用时<组件名 v-bind:props属性="动态值"></组件名>或<组件名 props属性="静态值"></组件名>
       **父组件向子组件传递消息用v-bind:props属性="值"传递,
   
2.通过事件,从子组件向父组件发送消息($emit)
  在子组件中设置事件,<button v-on:click="$emit('enlarge-text')">
  在父组件中接收事件,<blog-post v-on:enlarge-text="方法名">

  子组件抛出来的事件
   $emit('方法名',$event)
  父组件接受
   v-on:方法名="自定义方法"
3.插槽
   将定义父组件中的内容插入到子组件中,需要在子组件中定义<slot></slot>占位符,告诉子组件,这里可以获取到父组件的值内容
   如果有多个插槽,可以使用name进行区分
   <slot name="header"></slot>
  父组件调用
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
4.动态组件
   通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现
   <!-- 组件会在 `currentTabComponent` 改变时改变 -->
  <component v-bind:is="currentTabComponent"></component>

2.定义局部组件

var ComponentA = { /* ... */ }

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,    //自定义组件名:组件初始化
  }
})

3.Prop属性

* 以字符串数组的展示
  props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
* 以对象形式展示
  props: {
    title: String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object
  }
  注：如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)
  <blog-post v-bind="post"></blog-post>