组件基础-全局组件//全局组件的简写

组件基础-全局组件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app1"><!-- 3. 既可以在根组件 app2 的模板中使用 GlobalComponent 组件 --><global-component></global-component></div><div id="app2"><!-- 4. 也可以在根组件 app2 的模板中使用 GlobalComponent 组件 --><global-component></global-component></div><script src="./vue.js"></script><script>// 组件是可以重复使用的，每次使用时，Vue 都会帮我们创建一个该组件的实例。// new GlobalComponent()// new GlobalComponent()// 1. 使用 Vue.extend() 方法创建一个组件的构造函数，该构造函数继承了 Vue，（也就是说，我们创建的构造函数是 Vue 的子类）const GlobalComponent = Vue.extend({data: function () {return {message: '全局组件的数据'}},template: '<div><h1>{{message}}</h1></div>'});// 2. 将 GlobalComponent 组件注册成全局组件Vue.component('global-component', GlobalComponent)const app1 = new Vue({el: '#app1',data: {message: 'app1根组件的数据'}});const app2 = new Vue({el: '#app2',data: {message: 'app2根组件的数据'}});</script>
</body></html>

全局组件的简写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><!-- 3. 使用 GlobalComponent 组件 --><global-component></global-component><global-component></global-component></div><script src="./vue.js"></script><script>// 简写之前：// const GlobalComponent = Vue.extend({//     data: function () {//         return {//             message: '全局组件的数据'//         }//     },//     template: '<div><h1>{{message}}</h1></div>'// });// Vue.component('global-component', GlobalComponent)// 简写方式一：// Vue.component('global-component', Vue.extend({//     data: function () {//         return {//             message: '全局组件的数据'//         }//     },//     template: '<div><h1>{{message}}</h1></div>'// }))// 简写方式二：只需要将 Vue.extend() 方法中的对象作为 Vue.component() 方法的第二个参数即可。// Vue.component() 方法会在内部帮我们调用 Vue.extend() 方法Vue.component('global-component', {data: function () {return {message: '全局组件的数据'}},template: '<div><h1>{{message}}</h1></div>'})new Vue({el: '#app',data: {}});</script>
</body></html>

组件基础-全局组件//全局组件的简写相关推荐

Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 目录 4.组件化开发 4.1.组件的注册全局注册局部注册(只能在当前整个Vue实例的范围内才可以使用) 使用组件 ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
Vue 实例之全局API，实例属性，全局配置，组件进阶
文章目录写在前面 Vue 全局 API Vue.directive Vue.use Vue.extend Vue.set Vue.mixin Vue 实例属性 vm.$props vm.$optio ...
-组件基础-局部组件 // 局部组件的简写
-组件基础-局部组件 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
在线问诊、找科室、找医生、查疾病、图文问诊、电话急诊、健康咨询、问诊平台、咨询平台、问诊服务、语音问诊、开药问诊、看病平台、在线医疗、健康平台、登录注册、信息架构图、全局说明、组件规范、需求清单、
在线问诊.找科室.找医生.查疾病.图文问诊.电话急诊.健康咨询.问诊平台.咨询平台.问诊服务.语音问诊.开药问诊.看病平台.在线医疗.健康平台.登录注册.信息架构图.全局说明.组件规范.需求清单. A ...
Bootstrap框架使用（安装，全局样式，组件，插件）
简介中文官网:www.bootcss.com 1.响应式框架 2.HTML5文档类型 3.移动设备优先:必须设置viewport Bootstrap框架使用 BT使用安装 1.安装:1.下载引入:生 ...
vue 添加全局组件_自定义vue全局组件(Loading为例)
首先创建一个项目 vue init webpack-simple define-demo //define-demo 项目名称 cd define-demo npm install //安装本次所有需 ...

组件基础-全局组件//全局组件的简写

组件基础-全局组件

全局组件的简写

组件基础-全局组件//全局组件的简写相关推荐

最新文章

热门文章