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 ...
随机推荐
- Docker的安装、镜像加速配置
wget https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo -O /etc/yum.repos.d/docker-ce. ...
- MySQL运维16-双主双从读写分离
一.双主双从架构介绍 在MySQL多主多从的架构配置中和双主双从是一样的,学会了双主双从的架构部署,多主多从的配置也同样就回了.下面以双主双从作为示例演示.其中一个主机maste1用于处理所有写请求, ...
- IDEA插件（1 UI美化）
一.IDEA 插件怎么安装?(图文讲解) IntelliJ IDEA 支持丰富的插件,熟练使用相关插件,能够有效提高我们的开发效率以及用户体验.那么,要如何在 IDEA 中安装插件呢?这里有两种方式: ...
- C语言实现链表与文件的存取
作者:柠檬i,学习C时长两个月半的个人练习生 第一次写文章,难免有些不足,请多多包涵. 本程序主要功能是建立链表,然后把链表数据存储到文件中,然后把文件数据存储到数组中并输出. 不多说了,放代码. 此 ...
- HDU 2144 Evolution 后缀树/后缀数组
HDU 2144 Evolution 后缀树/后缀数组 题意 给我们不到一百个字符串(长度不到一百)以及一个百分比q,然后如果某两个字符串的最长公共子串占比超过了q(在两个串中都超过)则两个串为一个集 ...
- flutter杂知识点
child和children用于在一个容器小部件(如Container.Column.Row等)中放置一个或多个子小部件 1.child属性用于容器只包含一个子小部件的情况: 2.children属性 ...
- OBS鉴权实现的宝典秘籍，速拿！
摘要:OBS提供了REST(Representational State Transfer)风格API,支持您通过HTTP/HTTPS请求调用.本文将带你了解OBS API鉴权实现的宝典秘籍. OBS ...
- 一文讲述G6实现流程图绘制的常用方法
摘要:G6 是一个图可视化引擎.它提供了图的绘制.布局.分析.交互.动画等图可视化的基础能力. 本文分享自华为云社区<会用这些的api,轻松绘制流程图--antv.g6流程图入门>,作者: ...
- 火山引擎数智平台协助洞察美图类APP新增长，付费用户转化超过 124%
更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 美图类 APP 的下一个增长点在哪里? 目前,国内市场上的美图类 APP 大多都遵循着基础功能免费使用.个性化热门 ...
- 使用 Kubeadm 部署 Kubernetes(K8S) 安装 -- 持久化存储(NFS网络存储)
使用 Kubeadm 部署 Kubernetes(K8S) 安装 使用 Kubeadm 部署 Kubernetes(K8S) 安装 -- Ingress-Ngnix Volume 是 Pod 中能够被 ...