深度了解，组件Component基本使用

一、组件
组件（Component）是Vue.js是最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

1.全局组件：通过vue.component（'组件名称'，{}）注册

点击查看代码

 <div id="box">
        {{name}}
        <xxoo></xxoo>  //通过组件名称调用
 </div>
 <script>
        Vue.component('xxoo',{
            template:`<div><h1>我是全局组件</h1>{{name}}{{aa()}}<b><abc></abc></b></div>`,
            data(){
                return {
                    name:"李四"
                }
            },
            methods:{
                aa:function(){
                    console.log("我是aa方法")
                }
            }
        }) 
        var VM = new Vue({
            el:"#box",
            data:{
               name:'张三'
            }
       })
 </script>

注意: data写成函数,然后返回一个对象,对象里面在写属性.组件里面只能有一个根节点
注册模板可有多个方法可以使用,根据自己习惯即可,上述为一种,以下还有两种:

点击查看代码

 <template id='xx'>坎坎坷坷</template>  
 Vue.component('组件名',{
	template:'#xx',
	data(){
		return:{
			name:"张三'
		}
	},
	methods:{
	}
})

点击查看代码

var xx = `<div></div>`
Vue.component('组件名',{
	template:xx,
	data(){
		return:{
			name:"张三'
		}
	},
	methods:{
	}
})

(二)局部组件:在一个组件中通过components注册 注意:局部组件,只能带当前组件中使用

点击查看代码

<div>
    <aa></aa>
    <bb></bb>
 </div>
<script>
  var t1 = `<div>
              <h1>我是局部组件aa</h1>
               {{name}}
            </div>`
  var t2 = `<div>
         	<h1>我是全局组件aa</h1>
         	<bbChild2></bbChild2>
      	   </div>`
  Vue.component('bb',{
            template:t2,
            components:{
                bbChild2:{
                    template:`<span>我是bb中的局部组件222</span>`
                }
            }
        })
  var VM = new Vue({
            el:'#box',
            components:{
                aa:{
                    template:t1,
                    data(){
                        return{
                            name:'张三'
                        }
                    }
                }
           	}
  })
</script>

(三)动态组件:不同组件进行切换,使用is属性指定

点击查看代码

 <div id="box">
 		<ul>
            <li v-for='i in list' @click='xxoo = i.value'>{{i.name}}</li>  
        </ul>
        <keep-alive>
            <component :is='xxoo'>11</component>
        </keep-alive>
 </div>
 <template id='aaT'>
     <div>我是首页</div>
 </template> 
  <template id='bbT'>
      <div>我是个人中心</div>
  </template>
  <script>
        Vue.component('aa',{
            template:"#aaT",
            destroyed(){
                console.log('首页凉了')
            }
        })
        Vue.component('bb',{
            template:"#bbT",
            destroyed(){
                console.log('个人中心凉了')
            }
        })
        var VM = new Vue({
            el:"#box",
            data:{
                xxoo:"aa",
                list:[{'name':"首页",'value':"aa"},{'name':"个人中心",'value':"bb"}]
            }
        })
  </script>

注:作用:当组件切换时候默认会创建和销毁,不想创建和销毁的话可以使用keep-alive标签把component标签包裹上,这回在切换的时候组件会有缓存