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 ...
随机推荐
- SpringCloudGateway解决跨域问题
1.跨域问题详情 2.为什么会跨域? 官方定义:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS 怎么出现的? 1.浏览器访问了一个业务 h ...
- ElasticSearch之文件描述符的数量
ElasticSearch在运行过程中,涉及大量文件的打开.关闭.读.写等操作.因此当ElasticSearch进程的文件描述符数量不足时可能导致丢失数据等故障现象. 因此为保障ElasticSear ...
- 简易机器学习笔记（十）Windows下 PaddlePaddle配置CUDA加速环境
前言 大伙既然都来做这个了,那配个CUDA环境肯定是必不可少的了吧(笑) 最前面的最前面, 流程 确定当前设备支持的CUDA版本 安装CUDA Toolkit 和 GPU版的Paddlepaddle ...
- C语言汉诺塔递归算法实现
这是个目录 一.什么是递归函数 1.先看一下一个递归的例子 2.递归的基本原理 二.汉诺塔问题 1.简要概括一下汉诺塔的故事 2.回到编程,汉诺塔问题主要就是解决这个问题: 3.怎么解决汉诺塔问题 要 ...
- P5137 题解
前言 首先感谢所有帮助我卡常的大佬们. 题意 求 \((\sum_{i = 0}^{n} a^i b^{n - i})\mod p\) 的值(\(n \leq 10^{18}\),\(p\) 不一定为 ...
- GOF23--23种设计模式（二）
一.建造者模式 建造者模式也是属于建造型模式,它提供了一种创建对象的最佳方式 定义:将一个复杂的对象的构建和它的表示分离,使得同样的构建过程可以创建不同的表示 主要作用:在用户不知道对象的构建细节的情 ...
- Flutter Getx 中的Dialog 以及改变主题
设置应用程序入口 当我们导入依赖后,在应用程序顶层把 GetMaterialApp 作为顶层,如下所示 import 'package:flutter/material.dart'; import ' ...
- 从标准到开发，解读基于MOF的应用模型管理
摘要:为了打破技术与业务的壁垒,搭建技术与业务的桥梁,因此基于如下流程实现应用业务模型管理 ROMA ABM. 在数字经济时代,数据正在成为企业极其重要的战略性资产.在政府方面,数据第一次作为新型生产 ...
- 近数据处理（NDP）——GaussDB(for MySQL)性能提升的秘密
摘要:云堆栈的深度集成是释放云数据库力量的关键,华为云在实现这一目标方面处于领先地位,正如GaussDB(for MySQL)所证明的那样. 本文分享自华为云社区<近数据处理(NDP),为Gau ...
- 火山引擎 DataTester：0 代码也能实施 A/B 测试的实验平台
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,并进入官方交流群 近日,火山引擎 DataTester 对 A/B 实验"可视化编辑器"进行了升级,可视化编辑器功能让用 ...