VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >

  • 第七十一篇：Vue组件的私有和全局注册

好家伙，

 

1.组件的父子关系

我们封装三个组件，分别为left组件，right组件和App组件

在封装时：

在封装时，彼此的关系是独立的，并不存在父子关系

 

在使用时：

 

 

 在使用时，根据彼此的嵌套关系，形成了父子关系，兄弟关系

 

2.组件的私有注册

组件使用的三个步骤

在App.vue文件中写入

复制代码
<template>
  <div>
    <!--步骤三.以标签的形式使用组件-->
    <Left></Left>    
  </div>
</template>

<script>
//步骤一.导入需要的组件
import Left from './components/Left.vue'

export default {

     //步骤二.注册组件
     components:{
       'Left':Left
          
       //简写为 Left
     }
}
</script>
复制代码

 

简单地编辑一下Left文件

复制代码
<template>
    <div>
        <button>
            你好帅啊!!
        </button>
    </div>
</template>
复制代码

 

效果如下:

 

 此处,Left组件与App组价形成了父子关系

此处在conponents的节点下注册的是私有的组件,

只能在该组件中使用

 

3.注册全局组件

注册方法:

在vue项目的main.js的入口文件中,通过Vue.components()方法,可以注册全局组件.

代码如下:

在main.js文件中进行注册操作:

import Right from './components/Right.vue'

Vue.component('Right',Right)

 

全局注册,顾名思义,一次注册,全局使用
 

出处：https://www.cnblogs.com/FatTiger4399/p/16168165.html

相关教程