组件-使用 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>

相关文章
|
3月前
vue3定义暴露一些常量
vue3定义暴露一些常量
|
4月前
|
前端开发 API
|
前端开发
React中的类组件和函数组件之间有什么区别?
相同点 1、组件名首字母必须大写 2、返回的组件只能有一个根元素 3、都不能修改props
|
7月前
|
JavaScript 前端开发
详解Vue——定义组件的方式
详解Vue——定义组件的方式
46 0
|
7月前
|
JavaScript
Vue定义全局组件的三种方式
Vue定义全局组件的三种方式
45 0
|
7月前
|
JavaScript 前端开发
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
147 0
|
7月前
|
前端开发
React 函数组件与类组件属性默认值
React 函数组件与类组件属性默认值
73 0
|
JavaScript 前端开发
vue 子组件修改父组件变量问题
vue 子组件修改父组件变量问题
142 0
|
JavaScript
Vue——05-01组件的基本使用、全局组件,局部组件、父子组件的区别、注册组件的语法糖以及分离写法
组件的基本使用、全局组件,局部组件、父子组件的区别、注册组件的语法糖以及分离写法
112 0