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 ...
随机推荐
- 【scikit-learn基础】--『预处理』之 正则化
数据的预处理是数据分析,或者机器学习训练前的重要步骤.通过数据预处理,可以 提高数据质量,处理数据的缺失值.异常值和重复值等问题,增加数据的准确性和可靠性 整合不同数据,数据的来源和结构可能多种多样, ...
- CH395+EMQX实现MQTT应用(Windows系统)
目录: 1.MQTT协议 1.1简介 1.2特性 1.3实现方式 1.4数据包结构 2.EMQX具体操作步骤 3.代码说明 4.工程链接 MQTT协议 1.MQTT简介 MQTT是一种基于 发布/订阅 ...
- ElasticSearch-Mapping类型映射-增删改查
https://www.elastic.co/guide/en/elasticsearch/reference/6.8/mapping.html 7.x版本后默认都是_doc类型 增加Mapping映 ...
- Javascript面向对象的程序设计 —— 自定义类实现继承的6种方法
许多OO语言都支持两种继承方式: 接口继承:只继承方法签名: 实现继承:继承实际的方法.ECMAScript只支持实现继承,实现继承是继承实际的方法,依靠原型链来实现.1.原型链原型链是实现继承的主要 ...
- WebView中的页面调试方法
在 iOS 12 中,苹果正式弃用 UIWebView,改成 WKWebView,参考官方声明. 后者在性能.稳定性.功能方面有很大提升,并且与 Safari 具有相同的 JavaScript 引擎( ...
- DBeaver连接国产数据库OceanBase，以及Python连接，解决ModuleNotFoundError: No module named '_jpype'
DBeaver连接OceanBase 参考:https://www.modb.pro/db/365929 用户名的格式为: 数据库用户名@租户名#集群名 Python连接OceanBase 参考:ht ...
- python自动化测试相关资料
java神功: https://yuedu.baidu.com/ebook/10f4bf7530126edb6f1aff00bed5b9f3f80f7212 selenium书:https:// ...
- JavaScript 常见错误与异常处理
一.为什么要了解常见JS错误 1.调试和故障排除: 了解常见的JavaScript错误可以帮助你更好地调试和故障排除代码.当你遇到错误时,能够快速识别错误类型并找到解决方法,可以节省大量的时间和精力. ...
- C++设计模式——单例类
C++设计模式--单例类 本文假设有一个Manager管理类,探讨单例类懒汉/饿汉模式的实现,和单例类的多线程安全性,最后介绍Meyers Singleton写法. 懒汉模式 当第一次要用单例类的时候 ...
- Jenkins汉化配置
登录进入Jenkins首页 输入:本地ip+端口号(localhost:8099) 进入插件管理页面(Manage Jenkins)安装相关插件 搜索:到available栏目搜索:Locale pl ...