vue 的 component

component 组件 

注册：

　　1全局注册 ： 可以在 各vue实例 中使用

Vue.component('tag-name',{
　　//options
　　...
})

　　2局部注册 ： 只能在注册他的vue实例中使用

new Vue({

components:{
　　'tag-name':{
　　//options
　　.....
}
}
})

View Code

is 作用

　当组件挂载在已存在的元素上时。遇到某些元素，浏览器是不认的：<ul>, <table> <ol>,...

这时，就要使用is 关键字

<ul>
    <li is="tag-name"></li>
</ul>

props，events ，slots：组件中数据的传递

父组件通过props 向下传递数据给子组件，子组件通过events 给父组件发送消息

events
//父组件
<father :balala="balalaFun">
   .....    
    <child></child>
</father>

//子组件
{
name:'child',
    methods:{
    bababa(){
    return this.$emit('balalaFun');//触发自定义事件
}
}
}

<father :da="dada">
 <child></child>    
</father>

//子组件
{
name:'child',
props:[da]
}

slots:模板引擎之类的，在组件中插入内容机制

子组件中定义默认内容，若父组件不向子组件 添加任何字符串时，会显示子组件的默认内容

//子组件
<div>
     <h1>hhhh</h1>
    <solt>
       <h2>22222</h2>
   </solt>
</div>

//父组件
<div>
   <child>
       <h3>replace to 22222</h3>
   </child>
<div>

动态组件：为了适应页面局部刷新   一处地方应用多个组件

<component is=" boolean ? component1 : component2 ...:"></component>

结合is  进行判断，确定是显示1还是2组件~~~~