详解vue组件(一)全局组件与局部组件

vue 专栏收录该内容
4 篇文章 0 订阅

一、全局组件

全局组件的形式如下:

<template id="childrenOne">
	<div>
		<p>我是组件A</p>
	</div>    
 </template>
 
Vue.component('children-a',{
		//data 为对象类型,将数据放在返回值中
        data(){
            return{
                title:"我是子组件"
            }
        },
        template:'<div>{{title}}</div>'
        //也可以直接写一个template的id
        //template:'#childrenOne'
    })

其中Vue.component 的第一个参数为组件名,以后可以根据这个组件名在其他地方进行调用,而第二个参数大括号里面放的内容跟我们平时new一个Vue对象里面放的内容一模一样,只不过这个里面的data是一个函数形式。另外template里面可以写html代码段,也可以在body里写一个template,增加一个id,然后在template里直接写Id名称。

注:template里面内容只能用一个唯一的div包裹住,如果template的儿子元素中有两个元素,那么就会报错。

全局组件完成后相对于局部组件来说不用注册在任何vue管辖的html中(也就是vue的el元素下)都可以调用。

完整流程

html:

<div id="app">
    <children-a></children-a>
</div>

js:

	Vue.component('children-a',{
        data(){
            return{
                title:"我是子组件"
            }
        },
        template:'<div>{{title}}</div>'
    })
    var vm = new Vue({
        el:'#app',
    })

注: 在我测试的来看,vue的全局组件没有变量提升,所以全局组件要在Vue实例前。

一、局部组件

局部组件的形式如下:

var componentA={
     data(){
          return{
              text:"我是组件A"
          }
      },
      template:'<div>{{text}}</div>'
 }

局部组件就是定义一个普通的对象,对象里的值与全局第二个参数里面的内容是一模一样的,就是在用的时候,局部组件需要在Vue实例对象里面注册一下。

完整流程

html: (调用的话与全局组件一样)

 <div id="app">
       <component-a></component-a>
  </div>
  <template id="childrenOne">
       <div>
           {{text}}
       </div>
   </template>

js

 var componentA={
      data(){
          return{
              text:"我是组件A"
          }
      },
      template:'#childrenOne'
  }
  var vm = new Vue({
      el:'#app',
      components:{
          'component-a':componentA
      }
  })

注:
(1)同样局部组件也应该写在Vue实例的前面,要不会报错。
(2)在注册时也就是要调用时候的名字最好都是小写或者是kebab-case方式。要不也会报错。

总结:
全局组件与局部组件除了在定义时,一个是Vue.component一个是定义一个对象不太一样,里面写的内容是完全一模一样的,另外有一点区别就是局部组件需要注册一下,而全局组件不用注册。再次强调在注册的时候注意一下名字的规范。最后的调用也是一样的。无论是全局组件还是局部组件都没有变量提升,建议都把组件写在vue实例对象的前面

  • 1
    点赞
  • 0
    评论
  • 6
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:游动-白 设计师:白松林 返回首页

打赏作者

程序媛啊啊啊

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值