vue组件（读vue.js2.0参考手册）

闲来看了下vue的参考手册，组件这块大概分为几个重要的知识点

一、组件的基本使用

vue-cli  中 是   

html:

 <base-achievement v-bind:peopleInfo="people" v-bind:infoStyle="allstyle"></base-achievement>

import baseAchievement from '@/components/contentdetail/baseAchievement';

export default {
  components:{
  baseAchievement,

baseAchievement.vue中是模板内容

字符串形式

HTML：

<div id="example">

<my-component></my-component>

</div>

// 注册

Vue.component('my-component',{

template:'<div>A custom component!</div>'

})

// 创建根实例

newVue({

el:'#example'

})

使用时注意：

1\当使用 DOM 作为模版时，会受到 HTML 的一些限制，尤其像这些元素<ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素，<option> 只能出现在其它元素内部。

所以：

< table > < my - row >...</ my - row > </ table>

报错；

可以改为

< table > < tris ="my-row" ></ tr > </ table >

二、组件之间传值

1、父子组件之间传值：不再介绍，上篇博客已经介绍

2、非父子组件

// 触发组件 A 中的事件 

bus.$emit('id-selected',1）

// 在组件 B 创建的钩子中监听事件 

bus.$on('id-selected',function(id){

})

3、slot(父组件向子组件分发内容)

父组件中有内容，而子组件替换后父组件会把父组件内容遮盖

例

<children>  
        <span >12345</span>
        <span>78902</span>

<!--上面这行不会显示-->  没有写slot
        <span slot='first'>12345</span>
        <span slot='second'>78902</span>
 </children>

<script type="text/javascript">
var vm = new Vue({  
        el: '#app',  
        components: {  
//          children: {    //这个无返回值，不会继续派发  
//              template: "<button>为了明确作用范围，所以使用button标签</button>"  
//          }  
children: {    //这个无返回值，不会继续派发  
                template: "<button><slot name='first'></slot>为了明确作用范围，所以使<slot name='second'></slot>用button标签</button>"  
            }  
        }  
    }); 
</script>

三、动态组件（可以通过动态组件实现tab切换效果）

<classB :is="currentTab"  keep-alive（避免重新渲染）></classB>

可以通过点击切换currentTab实现组件的动态切换

大致就这些，其他复杂的还未接触；