组件基础

使用v-on 时 可以在根组件上 监听子组件由$emit注册的事件 

然后进行调试   子组件$emit(注册一个事件名,返回的数据)  该返回的数据可以由 $event 直接捕获到

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event" //直接捕获 在等号右边可以是一个变量或者是具体的数据  该变量无需传值 可以从父元素上拿到

></blog-post>

也可以是在根组件上 v-on 上注册一个方法 用这个方法来接收这个参数。

如

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"  //该方法只能接收一个参数 所有在传输多条数据时 可以传一个对象或者一个json
></blog-post>


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

组件内 的template： 可以使用字符串模板 es6 语法需要使用babel 或者使用其他插件来支持IE8  也可以使用 转义符号去支持IE8浏览器 

组件内使用slot插槽 可以在template中直接使用slot去占位 然后在该组件解析上去使用 和插入内容。

vue的官网组件切换实例如下

<component v-bind:is="currentTabComponent"></component>
这里可以使用
vue的代码
var tabs = [
  {
    name: 'Home', 
    component: { 
      template: '<div>Home component</div>' 
    }
  },
  {
    name: 'Posts',
    component: {
      template: '<div>Posts component</div>'
    }
  },
  {
    name: 'Archive',
    component: {
      template: '<div>Archive component</div>',
    }
  }
]

new Vue({
  el: '#dynamic-component-demo',
  data: {
      tabs: tabs,
    currentTab: tabs[0]
  }
})

html的代码

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>