Vue第三篇 Vue组件
01-组件的全局注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
<my_header></my_header>
</div>
<hr>
<div id="app2">
<my_header></my_header>
</div>
<script>
Vue.component("my_header", {
template: `<div><h1>{{title}}</h1></div>`,
data() {
return {
title: "这是头部"
}
},
methods: { }
});
const app = new Vue({
el: "#app"
});
const app2 = new Vue({
el: "#app2"
})
</script> </body>
</html>
02-组件的局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<my_com></my_com>
<my_com></my_com>
<my_com></my_com>
<my_com></my_com>
</div>
<script>
let my_com_config = {
template: `<div><h1>这是局部组件</h1></div>`
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script> </body>
</html>
03-子组件的注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div><h2>这是一个子组件</h2></div>`
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child></child>
</div>
`,
components:{
child: child_config
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script> </body>
</html>
04-父子组件通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div>
<h2>这是一个子组件</h2>
<p>父亲跟你们说~~{{father_say}}</p>
</div>`,
props: ["father_say"]
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child :father_say="f_say"></child>
</div>
`,
components:{
child: child_config
},
data(){
return {
f_say: "滚~~"
}
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script> </body>
</html>
05-子父通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
template: `<div>
<h2>这是一个子组件</h2>
<button @click="my_click">点击向父亲说话</button>
</div>`,
methods: {
my_click() {
// 向父亲说话
// 子组件提交事件
this.$emit("son_say", "父皇，儿臣有事启奏~~")
}
}
};
let my_com_config = {
template: `<div>
<h1>这是一个组件</h1>
<child @son_say="my_son_say
"></child>
<p>儿子跟我说~~{{say}}</p>
</div>
`,
components:{
child: child_config
},
data(){
return {
say: ""
}
},
methods: {
my_son_say: function (data) {
this.say = data
}
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script> </body>
</html>
06-非父子通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<xiayuhao></xiayuhao>
<yuanchengming></yuanchengming>
</div>
<script>
let chenwen = new Vue();
let xiayuhao_config = {
template: `<div>
<h1>这是夏雨豪</h1>
<button @click="my_click">点击给袁打电话</button>
</div>`,
methods: {
my_click(){
// 给袁打电话 说晚上等我~~
// 向陈文提交事件
chenwen.$emit("call", "今晚等我~~~")
}
}
};
let yuanchengming = {
template: `<div>
<h1>这是袁承明</h1>
<p>夏雨豪跟我说~~{{xia_say}}</p>
</div>`,
data(){
return {
xia_say: ""
}
},
mounted(){
// 组件加载完成后执行的方法
let that = this;
chenwen.$on("call", function (data) {
console.log(data)
that.xia_say = data
})
}
};
const app = new Vue({
el: "#app",
components: {
xiayuhao: xiayuhao_config,
yuanchengming: yuanchengming
}
})
</script> </body>
</html>
07-混合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app"> <com1></com1>
<com2></com2> </div>
<script>
let base = {
data(){
return {
is_show: false
}
},
methods: {
show_text(){
this.is_show = true
},
hide_text(){
this.is_show = false
}
}
};
let com1 = {
template: `<div>
<button @click="show_text">点击显示文本</button>
<button @click="hide_text">点击隐藏文本</button>
<div v-show="is_show">夏雨豪</div>
</div>`,
mixins: [base],
data(){
return{
is_show: true
}
}
};
let com2 = {
template: `<div>
<button @mouseenter="show_text" @mouseleave="hide_text">提示框</button>
<div v-show="is_show">夏雨豪</div>
</div>`,
mixins: [base]
} const app = new Vue({
el: "#app",
components: {
com1: com1,
com2: com2
}
})
</script> </body>
</html>
08-插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> </head>
<body>
<div id="app">
<com>
<h3 slot="title">Python21天入门</h3>
<p slot="brief">从入门到精通</p>
</com>
<com>
<h3 slot="title">Mysql</h3>
<p slot="brief">从删库到跑路</p>
</com>
</div>
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<hr>
<slot name="title"></slot>
<slot name="brief"></slot>
</div>
</template>
<script>
let com = {
template: "#my_com"
};
const app = new Vue({
el: "#app",
components: {
com: com
}
})
</script> </body>
</html>
总结：
Vue组件
组件的全局注册
-- Vue.component("组件名称", {
template: `只识别一个块级作用域`,
data(){
return{
name: xxxx
}
},
methods: {},
})
-- 任何Vue实例里用 <组件名称></组件名称>
组件的局部注册
-- let com_config = {.....}
-- const app = new Vue({
el: "#app",
components: {
组件名称： com_config
}
})
-- <div><组件名称></组件名称></div>
子组件的注册
-- 在父组件里 components: {
子组件的名称： 子组件的配置信息
}
-- 在父组件的template里展示子组件
<child></child>
父子通信
-- 先给子组件绑定属性
-- 在子组件通过props:["属性名称"]
子父通信
-- 子组件先提交事件
this.$emit("事件名称"， data)
-- 父组件 给子组件绑定事件
自己处理这个事件
非父子通信
-- 定义一个中间调度器
let Event = new Vue();
-- 其中一个组件向中间调度器提交事件
Event.$emit("事件名称", data)
-- 另一个组件要监听中间调度器里的事件
Event.$on("事件的名称", function(data){
注意this的问题
})
混合
-- 复用共用的代码块
-- mixins: [base]
插槽
-- 实现组件内容的分发
-- slot
-- 直接用slot标签
-- 命名的slot
-- 先给slot加name属性
-- 给标签元素添加slot属性= name属性值
Vue第三篇 Vue组件的更多相关文章
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- 前端vue系列-起始篇 vue的基本认知
hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- vue学习指南：第三篇(详细) - vue的生命周期
今天小编给大家详细讲解一下 vue 的生命周期.希望大家多多指教,哪里有遗漏的地方,也请大家指点出来 谢谢. 一. 怎么理解 Vue 的生命周期的? 生命周期:从无到有,到到无的一个过程.Vue的生命 ...
- 阅读vue源码-----内置组件篇（keep-alive）
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
- vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
- 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...
随机推荐
- LeetCode15：三数之和（双指针）
解题思路:常规解法很容易想到O(n^3)的解法,但是,n最大为1000,很显然会超时. 如何优化到O(n^2),a+b+c =0,我们只需要判断 a+b的相反数是否在数组中出现,而且元素的取值范围在 ...
- 常用API之IP定位地区
常用API之IP定位地区 高德地图API https://lbs.amap.com/api/webservice/guide/api/ipconfig 百度地图API https://lbsyun.b ...
- ElasticSearch之Merge
Elasticsearch的shard,即对应Lucene的index. Lucene的index由多个segment组成. segment是index保存数据的最小单位,不支持修改. Elastic ...
- ElasticSearch之cat plugins API
命令样例如下: curl -X GET "https://localhost:9200/_cat/plugins?v=true&pretty" --cacert $ES_H ...
- DDD落地实践-架构师眼中的餐厅 | 京东云技术团队
本文以餐厅场景为叙事主线,以领域驱动为核心思想,结合架构设计与功能设计方法论.是从领域分析到落地的全过程案例,内容偏重于落地,因此不乏一些探讨,欢迎指正. 文章较长.全程干货.耐心读完.必有收获. 本 ...
- 记一次windows病毒联合排查全过程
8月2日通过态势感知平台,发现大量内部DNS服务器有恶意请求,且告警描述为:试图解析僵尸网络C&C服务器xmr-eu2.nanopool.org的地址,通过截图可以看到,用户每5分钟会定期向目 ...
- 文心一言 VS 讯飞星火 VS chatgpt （177）-- 算法导论13.3 6题
六.用go语言,说明如果红黑树的表示中不提供父指针,应当如何有效地实现 RB-INSERT. 文心一言: 红黑树是一种自平衡的二叉搜索树,其中每个节点都包含一个颜色属性(红色或黑色),并且满足以下性质 ...
- 通过 KernelUtil.dll 劫持 QQ / TIM 客户端 QQClientkey / QQKey 详细教程（附源码）
前言 由于 QQ 9.7.20 版本后已经不能通过模拟网页快捷登录来截取 QQClientkey / QQKey,估计是针对访问的程序做了限制,然而经过多方面测试,诸多的地区.环境.机器也针对这种获取 ...
- Java使用OSS实现上传文件
阿里云OSS使用 1.准备OSS 访问阿里云官网,注册并登录账户(支付宝方便一些,顺便冲点钱) 在产品分类中,找到阿里云oss 然后创建一个bucket 2.使用OSS(上传文件) 2.1在阿里云网站 ...
- 28、Flutter Key详解
在Flutter中,Key是不能重复使用的,所以Key一般用来做唯一标识.组件在更新的时候,其状态的保 存主要是通过判断组件的类型或者key值是否一致.因此,当各组件的类型不同的时候,类型已经足够 用 ...