vue中的全局组件和局部组件的应用
1全局组件
组件树
- solt 内置分发组件
- 应用见局部组件
2局部组件
2.1局部组件的使用:生子 - 挂子 - 用子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
//那么template模板的优先级大于el
// 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content
//第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data() {
return {text: "我是子组件"}
},
//第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
template: `
<div id="a">
<h2>{{text}}</h2>
</div>
`,
//给子组件定义方法 比如说a标签的超链接
methods:{
},
}
new Vue({
el: "#app", //绑定的是上面的id="app"
data() {
return {msg: "alex"}
},
//与生命周期有关
//用模板字符串
//定义模板
// 第三步:用子 把<App />写下面就是 用子 但是里面的内容需要写到上面子组件里App里
// template可以不用写 但是要挂载到 el上去
template: `
<div class="app">
<App><App/>
</div>
`,
components: {
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App
}
})
</script>
</body>
</html>
2.2局部组件的使用更改 以及全局组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<App></App>
</div>
<script src="vue.js"></script>
<script>
//如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容
//那么template模板的优先级大于el
// 全局组件 *** 第一个参数是组件的名字,第二个参数是options
// 全局组件声明之后,可以再任意的组件里使用, 放到别的组件之后,就成了别的组件的子组件了
// 使用内置组件slot进行分发 让让别的组件中的Vbtn按钮显示不同的名称 ******
Vue.component("Vbtn",{
data(){ return {}},
template:`<button><slot>按钮</slot></button> `,
})
// 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content
//子组件2
//第一步:生子2 挂子往App里挂, 不需要挂Vue里
let Vheader = {//对象
data(){
return {}
},
//template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****
template:`
<div>
<h2>生子是在子组件中</h2>
<h2 style="color:red">挂子和用子是在父组件中</h2>
<Vbtn></Vbtn>
</div>
`,
}
//第一步: 声子 Vue中组件的首字母要大写, 跟标签区分
//组件中的data必须是个函数,一定要有返回值
let App = { //跟的是一个对象 这个对象里 就是除了下面的Vue中,el以外的所有属性
data() {
return {text: "我是子组件"}
},
//第四步: 给子组件里写内容. 当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系
//在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************
// 第三步:用子2 <Vheader></Vheader>, 下一步去对应模板Vheader的template里写内容
template: `
<div id="a">
<h2>{{text}}</h2>
<Vheader></Vheader>
<Vbtn>登录</Vbtn>
<Vbtn>注册</Vbtn>
<Vbtn>提交</Vbtn>
</div>
`,
// template里的标签必须有一个父标签包裹
//给子组件定义方法 比如说a标签的超链接
methods:{
},
components:{
// 第二步:挂子2
Vheader
},
}
new Vue({
el: "#app", //绑定根元素 是上面的id="app"
data() {
return {msg: "alex"}
},
//根组件中 可以把template删除 直接在id = "app"的div中使用
// 子组件中的template 不能删除,因为子组件中的结构最终会渲染到id="app"的div里面<App></App>
components: {
// 第二步: 挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件
App //如果key和value一样,可以只写App 替代App:App
}
})
</script>
</body>
</html>
vue中的全局组件和局部组件的应用的更多相关文章
- Vue 组件&组件之间的通信 之全局组件与局部组件
在上篇博客中介绍了组件,在注册组件的简写中就用到了全局组件 //注册组件的简写方式 Vue.component('my-componenta',{ template:'<h2>hello ...
- vue -全局组件和局部组件
1.全局组件:Vue.component('标签名', 构造器名) Vue.component('mycpn', cpnC) 注:这种注册组件的方式是全局组件,可以在多个Vue实例中使用. 2.局部组 ...
- Vue基础学习 --- 全局组件与局部组件
组件分为 全局组件 局部组件 全局组件 // 语法---Vue.component('组件名', {组件参数}) Vue.component('com1', { template: '<butt ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- 详解vue全局组件与局部组件使用方法
这篇文章主要为大家详细介绍了vue全局组件与局部组件的使用方法,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. vue全局/局部注册,以及一些混淆的组件main.js ...
- 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- TZ_16_Vue定义全局组件和局部组件
1.定义全局组件 我们通过Vue的component方法来定义一个全局组件. <div id="app"> <!--使用定义好的全局组件--> <co ...
- Vue 中的受控与非受控组件
Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...
随机推荐
- 医院大数据平台建设_构建医院智能BI平台的关键技术
在新技术层出不穷的当下,世界各地的组织正在以闪电般的速度变化和进化,以便在新技术可用时加以利用.其中目前最具活力的一个领域是商业智能(BI).想一想,你可能已经习惯以每周或每月IT或数据科学家交付给你 ...
- Zabbix 5.0：服务端进程总结
Blog:博客园 个人 参考:<深入理解Zabbix监控系统>.<Zabbix用户手册> Zabbix服务端进程被分为不同的种类,每一种进程负责相应的任务,包括收集原始监控数据 ...
- 案例一：shell脚本指定日期减去一天
如果只减去一天的话,直接写就可以了. #date -d"yesterday 20150401" +%Y%m%d 如果要减去几天,还可以这样写,如果用负数是往前数, #date -d ...
- Java笔记——选择语
Java笔记--选择语句 1. if语句 规律: 1. 首先计算表达式的值. 2. 若表达式为真,则执行对应语句,为假则不执行. 第一种: if(表达式) 语句;//多个语句可用{} 例如 ...
- 【C# 线程 】内存模型 与Volatile
CPU硬件有它自己的内存模型,不同的编程语言也有它自己的内存模型. 在 C# 的语言规范中 ECMA-334,对于Volatile关键字的描述: 15.5.4 Volatile fieldsWhen ...
- Java开发名词解释
API 问题:API 解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组 ...
- Lua中如何实现类似gdb的断点调试--01最小实现
说到Lua代码调试,最常用的方法应该就是加一堆print进行打印.print大法虽好,但其缺点也是显而易见的.比如效率低下,需要修改原有函数内部代码,在每个需要的地方添加print语句,运行一次只能获 ...
- js判断字符串是否为正确的JSON格式及JSON格式化的实现
判断是否是正确的JSON格式 function isJSON(str) { if (typeof str == 'string') { try { var obj=JSON.parse(str); i ...
- MySQL日常笔记第二讲
今日内容概要 存储引擎 MySQL的数据类型 约束条件 今日内容详细 存储引擎 """ 针对不同的数据可以有不同的存储方式 存储引擎就相当于针对数据采用不同的存储方式 & ...
- Windows原理深入学习系列-访问控制列表-关于安全描述符的补充
这是[信安成长计划]的第 20 篇文章 0x00 目录 0x01 安全描述符的结构 0x02 两个结构的不同点 0x03 真正的查询方案 0x04 参考文章 0x01 安全描述符的结构 在上一篇文章中 ...