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工具如何选择？这2款省心省时又省力！
随着大数据时代的到来,越来越多企业开始意识到数据的重要性.商业智能BI工具也如雨后春笋般不断涌现,如何选择BI工具倒成了企业急需解决的难题.BI工具的选择要具体问题具体分析,但大部分企业在选择BI工 ...
- shell脚本练习案例
转至:https://www.cnblogs.com/tui463/archive/2004/01/13/12663024.html shell脚本练习案例 案例一:通过位置变量创建系统账户及密码 分 ...
- docker配置tomcat
docker pull tomcat tomcat的目录结构 /usr/local/tomcat/webapps web目录 /usr/local/tomcat/logs 日志目录 /usr/loca ...
- QT：Qt Creator中创建的各种项目说明
Qt Widgets Application:支持桌面平台GUI的应用程序.GUI的设计完全基于C++,采用Qt提供的一套C++类库: Qt Console Application:控制台应用程序,无 ...
- WPS:字母自动变大写的解决办法
设置中:
- Python:在命令行窗口中运行Python程序
首先通过cd进入程序所在目录下 再通过python或者python3加要运行的python文件即可
- Python的介绍与主要方向
1.1 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: 计算机的发明,是为了用机器取代/解放人力, ...
- JZ-009-变态跳台阶
变态跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级--它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 题目链接: 变态跳台阶 代码 /** * 标题:变态跳台阶 * 题 ...
- Web端网站兼容性测试如何进行？来看看浏览器的兼容性测试要点
软件兼容性测试工作的目标是保证软件按照用户期望的方式进行交互.随着用户对来自各种类型软件之间共享数据能力和充分利用空间同时执行多个程序能力的要求,测试软件之间能否协作变得越来越重要. 平台的兼容性,包 ...
- tensorflow源码解析之framework-allocator
目录 什么是allocator 内存分配器的管理 内存分配追踪 其它结构 关系图 涉及的文件 迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...