组件-使用 components 定义私有组件|学习笔记

简介: 快速学习组件-使用 components 定义私有组件

开发者学堂课程【Vue.js 入门与实战组件-使用 components 定义私有组件】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/586/detail/8177


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


目录:

一、回顾

二、Components 私有组件

 

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

 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>

相关文章
|
4月前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
536 90
|
5月前
|
API
VUE3——如何挂载全局属性和方法
VUE3——如何挂载全局属性和方法
294 0
|
8月前
|
JavaScript 前端开发
详解Vue——定义组件的方式
详解Vue——定义组件的方式
50 0
|
8月前
|
JavaScript
Vue定义全局组件的三种方式
Vue定义全局组件的三种方式
55 0
|
8月前
|
JavaScript 前端开发
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
166 0
|
8月前
|
JavaScript 开发工具 开发者
vue中cli组件如何自定义定义
vue中cli组件如何自定义定义
95 0
|
JavaScript
vue父组件调用子组件方法
vue父组件调用子组件方法
85 0
|
JavaScript
Vue获取子组件实例对象 ref 属性
Vue获取子组件实例对象 ref 属性
188 0
|
前端开发 JavaScript
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
React中Refs的作用是什么?如何使用,父组件是函数组件ref如何获取子组件内容
206 0
|
JavaScript 前端开发
vue 子组件修改父组件变量问题
vue 子组件修改父组件变量问题
146 0