老雷PHP全栈开发教程之深入理解Vue组件

 Vue.component('list-cell', {
   // ... 选项 ...
 })
 Vue.component('ListCell', {
   // ... 选项 ...
 })

 var ComponentA = { /* ... */ }
 var ComponentB = { /* ... */ }
 var ComponentC = { /* ... */ }
 new Vue({
   el: '#app',
   components: {
 'component-a': ComponentA,
 'component-b': ComponentB
   }
 })

 <my-component v-on:call-parent="doSomething"></my-component>
 <div @click="$emit('call-parent','组件中的事件')"></div>

 <list-cell >slot中的内容</list-cell>
 组件
 <div>
 <div>{{isGoods}}</div>
 <div @click="$emit('call-parent',item)" v-for="(item,index) in items" :key="index">{{item}}</div>
 <slot></slot>
 </div>

 <component v-bind:is="currentTabComponent"></component>