【Vue.js 入门与实战】--组件-使用components定义私有组件

简介: 一、回顾二、Components私有组件

组件-使用components定义私有组件

 

目录:

一、回顾

二、Components私有组件

 

之前学习的前三种方式,都属于创建全局组件,所谓的全局是代表, mycom3 不仅仅可以被 adv 启用。

<div id=app2>

<mycom3></mycon3>

var vm =new vue({

 el:#app2

也可以使用这个组件。此时刷新保存,可以得到以下显示结果:

image.png

这是全局的组件。

 

一、回顾

1.vm属性有:

el:{}

data:{}

Methods:{}

filters:{} ,过滤器

directive:{},指令

components:{}

其中,filters:{} directive:{} 定义组件内部私有的指令,而 components:{} 定义实例内部私有组件

2. 钩子函数:

beforeCreate(){},

created(){},

beforeMount(){},

mounted(){},

beforeUpdate(){},

updated(){},

beforeDestroy(){},

destroyed(){},

 

 

二、Components私有组件

 

例:

var vm =new vue({

 el:#app2,

components:{  //定义实例内部私有组件

login{

template:’<h1>这是私有的login组件</h1>

}

}

})

<div id=app2>

 <login></login>

</div>

var vm2 =new vue({

  el:#app2,

components:{  //定义实例内部私有组件

login{

template:'#templ2

}

}

})

<template id=templ2>

 <h1>这是私有的login组件</h1>

</template>

相关文章
|
3天前
|
JavaScript 前端开发
vue3中使用动态组件
vue3中使用动态组件
|
3天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
13 1
|
3天前
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
12 2
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable流程查看器组件的升级修改
|
3天前
|
移动开发 前端开发 JavaScript
VUE3内置组件Transition的学习使用
VUE3内置组件Transition的学习使用
|
4天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
5 0
|
4天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
5天前
|
编译器
vue3组件TS类型声明实例代码
vue3组件TS类型声明实例代码
7 0
|
5天前
|
JavaScript 前端开发 IDE
vue3基础: 组件注册
vue3基础: 组件注册
11 0