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 当然也不例外.并且 ...
随机推荐
- Kafka经典三大问：数据有序丢失重复
Kafka经典三大问:数据有序丢失重复 在kafka中有三个经典的问题: 如何保证数据有序性 如何解决数据丢失问题 如何处理数据重复消费 这些不光是面试常客,更是日常使用过程中会遇到的几个问题,下面分 ...
- windows 应用商店常用软件
QuickLook 这个应用可以让你,用空格键查看几乎任何文件的信息. 例如快速查看图片,播放视频,阅读 PDF 等等,支持的格式多到吓人. Python 没错,就是那个非常火的编程语言,Pytho ...
- 基于IEC61499标准的组件
IEC 61499标准通常用于开发分布式控制系统.IEC 61499定义了功能模块(FB, function block)的模型.有三种FB,分别是Basic FB (BFB),Service Int ...
- Python 单例模式的几种实现方式
单例模式的几种实现方式 先来看几个魔法方法的简单运用:__new__, __init__, __call__. class A(object): def __init__(self, x): prin ...
- ansible复习笔记_基础-从零到无
--创建时间:2021年1月25日 --修改时间:2021年3月9日 --作者:飞翔的小胖猪 前言 该文档仅作为作者复习ansible使用,对格式和流程没有做过多的编排和概述.不喜勿喷. 基础 ans ...
- LeetCode-005-最长回文子串
最长回文子串 题目描述:给你一个字符串 s,找到 s 中最长的回文子串. 示例说明请见LeetCode官网. 来源:力扣(LeetCode) 链接:https://leetcode-cn.com/pr ...
- 微信小程序搜索并高亮关键字
更多解读可使用博客: https://www.jianshu.com/p/86d73745e01c 实现流程:1.在文本框中输入关键字key,如"比赛",检索出比赛相关的列表key ...
- 如何构建一个PKM系统
原文链接 这篇文章是个人知识总结相关的第一篇文章,主要目的是为了阐述我们为什么需要一个 PKM 系统,并且简单对自己这几年亲身形成的PKM 系统进行总结. PKM 是什么? PKM 是 Persona ...
- LGP7890题解
前置芝士的光速幂技巧. 本题解不是正解,和正解唯一的差别在于对幂的处理. 我们能够发现有: \[F(n,m,k)=\frac 1 n \binom {n+m-1} m \] 证明见这里. 然后我们开始 ...
- Python之GUI用户界面Tkinter(一)
Label Label(标签)组件用于在屏幕上显示文本或图像,仅能显示单一字体的文本 •参数 Label(master=None, **options) (class)**options 组件选项,下 ...