深刻了解组件Component基本使用

最新推荐文章于 2025-06-14 15:47:24 发布

原创最新推荐文章于 2025-06-14 15:47:24 发布 · 1.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js的组件系统，包括全局组件、局部组件和动态组件的创建与使用。全局组件通过`Vue.component()`注册，如`<xxoo>`，而局部组件只能在当前组件内使用，如`<aa>`和`<bbChild2>`。动态组件利用`is`属性实现不同组件间的切换，并可通过`<keep-alive>`保持组件状态。示例中展示了如何定义模板、数据和方法，以及如何在不同场景下使用组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件:

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

(一)全局组件:通过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>