vue 组件全局组件和局部组件component

1、全局组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app">vue组件测试</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册全局组件
            Vue.component('my-component',{template: '<div>我是全局组件</div>'})Vue.component('other-component', {template: '<div>我是另一个全局组件<my-component></my-component></div>'})new Vue({el:"#app",template:'<other-component></other-component>'})</script></body>
</html>

显示结果：

我是另一个全局组件

我是全局组件

2、局部组件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app">vue组件测试</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册局部组件
            const child = {template: '<div>我是局部组件</div>'}new Vue({el:"#app",template:'<my-component></my-component>',components:{'my-component': child}})</script></body>
</html>

显示结果：

我是局部组件

3、组件嵌套

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><div id="app">vue组件测试</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript">//注册局部组件
            const child = {template: '<div>我是局部child组件</div>'}const father = {template: '<div>我是father组件，我包含了：<child-component></child-component> </div>',components: {'child-component': child}}const grandFather={template: '<div>我是grandFather组件，我包含了：<father-component></father-component> </div>',components: {'father-component': father}}new Vue({el:"#app",template:'<my-component></my-component>',components:{'my-component': grandFather}})</script></body>
</html>

显示结果：

我是grandFather组件，我包含了：

我是father组件，我包含了：

我是局部child组件

参考自：https://www.cnblogs.com/penghuwan/p/7222106.html#_label0

转载于:https://www.cnblogs.com/150536FBB/p/11328651.html

vue 组件全局组件和局部组件component相关推荐

【Vue】全局过滤器和局部过滤器
Vue.js 允许自定义过滤器,可用作一些常见的文本格式化.过滤器可以用在两个地方:mustache 插值和 v-bind 表达式,被添加在 JavaScript 表达式的尾部,由管道符 (" ...
vue自定义全局loading加载组件
1.实现效果 2.实现原理 Vue.extend:extend 创建的是 Vue 构造器,可通过 new Profile().$mount('#mount-point') 来挂载到指定的元素上. vu ...
vue中全局注册和局部注册
全局注册 //在main.js中全局注册 import Vue from 'vue'//导入在components中创建的复用组件 import pageTools from '@/component ...
Vue组件之全局组件与局部组件
组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...
vue 全局/局部组件
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
Vue学习笔记（二） —— 组件开发
简介在了解了Vue语法的基础知识和常用特性之后,在进行正式的开发之前,非常有必要的对组件化的相关知识进行了解.本文就是为介绍组件的相关知识点的. 1.组件化开发思想现实生活中的组件化思想主要是:标 ...
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...

vue 组件全局组件和局部组件component

vue 组件全局组件和局部组件component相关推荐

最新文章

热门文章

vue 组件 全局组件和局部组件component

vue 组件 全局组件和局部组件component相关推荐

最新文章

热门文章

vue 组件全局组件和局部组件component

vue 组件全局组件和局部组件component相关推荐