Vue组件以及组件之间的通信
一、组件的注册
1、 全局组件注册
1. 注册基本语法Vue.component
Vue.component("my_header", {
template: `<div><h1>{{title}}</h1></div>`,
data() {
return {
title: "这是头部"
}
}
});
2. 第一个参数"my_header"：组件名称
3. 第二个参数{}：配置信息
4. 配置信息里面必须要有template，它的值是这个组件的html代码
5. 还可以有data、methods等参数，不同的是data不是对象了，而是函数，return返回的值，在template中可以获取并使用
函数详写是 data:function(){}; ES6中可以直接简写 data(){return }，其他函数一样可以简写省略 :function
6. Vue里面有的参数，组件里面多数也有，但是有一些参数是组件不能有的，比如el参数，所有组件都是Vue可复用的实例
7. 全局组件，所有app都可以使用
8. demo
<body>
<div id="app">
<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: "这是头部"
}
}
});
const app = new Vue({
el: "#app", }); const app2 = new Vue({
el: "#app2"
})
</script>
</body>
2、局部组件注册
1. 在某个app下注册组件，其他app不能使用
2. 基本语句：某个app内使用参数components: {组件名称1： 配置信息1, 组件名称2： 配置信息2}
3. demo
<body>
<div id="app">
<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>
3、子组件的注册
1. 在某个组件内，也可以使用components注册它的子组件
2. 子组件需要这个组件的template代码内使用
3. demo
<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>
二、组件之间的通信
1、父子组件之间的通信
1. 在父组件的配置信息template中引用子组件，给子组件设置一个属性，值是父组件data的值
2. 在子组件中配置一个props参数(数组)，里面是那个属性名
3. 然后在子组件的template代码中就可以直接使用这个属性获取到父组件传过来的值
4. demo
<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>
2、子父组件之间的通信
1. 子组件向父组件传数据，需要提交一个事件
2. 通过this.$emit("事件名称", "要传的值")提交一个事件给父亲
3. 在父组件中绑定子组件提交过来的事件，创建一个方法处理这个事件
4. data函数接收子组件提交过来的数据
5. demo
<body>
<div id="app">
<my_com></my_com>
</div>
<script>
let child_config = {
// 设置一个click事件，通过click事件向父亲提交一个事件son_say和数据
template: `<div>
<h2>我是一个子组件</h2>
<button @click="my_click">点击向父亲说话</button>
</div>`,
methods: {
my_click() {
// 向父亲说话
// 子组件提交事件
this.$emit("son_say", "我会好好学习的")
}
}
};
let my_com_config = {
// 父组件接收子组件提交的事件son_say，并给这个事件设置一个处理方法my_son_say
// 处理后的数据就可以使用了{{say}}
template: `<div>
<h1>这是一个组件</h1>
<child @son_say="my_son_say"></child>
<p>儿子跟我说：{{say}}</p>
</div>
`,
components:{
child: child_config
},
data(){
return {
say: ""
}
},
// 接收子组件传来的数据data，并赋值给say,在代码中展示出来
methods: {
my_son_say: function (data) {
this.say = data
}
}
};
const app = new Vue({
el: "#app",
components: {
my_com: my_com_config
}
})
</script>
</body>
3、非父子组件之间的通信
1. 定义一个Vue实例作为两个组件之间通信的桥梁
2. 其中一个组件向中间调度器提交事件：Event.$emit("事件名称", data)
3. 另一个组件要监听中间调度器里的事件：Event.$on("事件的名称", function(data)
4. 注意this的问题：函数里面的this是最近的调用者，外面的this才是这个组件
5. demo
<body>
<div id="app">
<ming></ming>
<hong></hong>
</div> <script>
// 这个Vue实例不用传数据，只是用于两个组件之间通信的桥梁
// 一个组件给这个实例提交事件，另一个组件在这个实例里监听这个事件
let other = new Vue(); let ming_config = {
template: `<div>
<h1>我是明哥</h1>
<button @click="my_click">给小红打电话</button>
</div>`,
methods: {
my_click: function() {
// 给小红打电话，说晚上等我，一起嗨
// 两个组件之间没有关系(不是父子)，需要通过一个Vue对象进行通信
// 给other对象提交事件
other.$emit("call", "晚上等我，一起嗨")
}
}
};
let hong_config = {
template: `<div>
<h1>我是红姐</h1>
<p>明哥勇猛地跟涐说：{{ming_say}}</p>
</div>`,
data(){
return {
ming_say: ""
}
}, // 钩子方法，组件加载完成后会执行这个方法
mounted(){
// 和$emit是一对的，$emit是提交事件，$on是监听$emit提交的事件
// 第一个参数是监听的事件名称，第二个参数是监听到后要执行的回调函数
let that = this; // 这个this是hong这个组件
other.$on("call", function(data){
// data是ming传过来的数据，里面的this是other的
that.ming_say = data;
})
}
}; const app = new Vue({
el: "#app",
components: {
ming: ming_config,
hong: hong_config
}
})
</script>
</body>
4、总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<ming></ming>
<hong></hong>
</div> <script>
let other = new Vue();
let child_config = {
template: `<div><p>子组件{{father_say}}</p>
<button @click="my_click">向父组件通信</button></div>
`,
props: ["father_say"],
methods: {
my_click: function () {
this.$emit("son_say", "I will")
}
}
};
let my_com_config = {
template: `<div>
<h1>父组件</h1>
<child :father_say="f_say" @son_say="s_say"></child>
<p>儿子跟我说：{{s_data}}</p>
</div>`,
components: {
child: child_config
},
data() {
return {
f_say: "好好学习",
s_data: ""
}
},
methods: {
s_say(data) {
this.s_data = data
}
}
}; let ming_config = {
template: `
<div>
<p>我是明哥</p>
<button @click="my_click">给小红打电话</button>
</div>
`,
methods: {
my_click() {
other.$emit("call", "晚上一起嗨嗨嗨")
}
}
};
let hong_config = {
template: `<div>
<h1>我是红姐</h1>
<p>明哥勇猛地跟涐说：{{ming_say}}</p>
</div>`,
data() {
return {
"ming_say": ""
}
},
mounted() {
that = this;
other.$on("call", function (data) {
that.ming_say = data
})
}
}; const app = new Vue({
el: "#app",
components: {
my_com: my_com_config,
ming: ming_config,
hong: hong_config,
}
});
</script>
</body> </html>
5、拓展
不同vue实例的组件，通信方法跟非父子方法一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head> <body>
<div id="app"> <!--vue实例1-->
<ming></ming>
</div>
<div id="app2"> <!--vue实例2-->
<hong></hong>
</div>
<script>
// 用于组件通信的vue实例
let other = new Vue(); let ming_config = {
template: `
<div>
<p>我是明哥</p>
<button @click="my_click">给小红打电话</button>
</div>
`,
methods: {
my_click() {
other.$emit("call", "晚上一起嗨嗨嗨")
}
}
};
let hong_config = {
template: `<div>
<h1>我是红姐</h1>
<p>明哥勇猛地跟涐说：{{ming_say}}</p>
</div>`,
data() {
return {
"ming_say": ""
}
},
mounted() {
that = this;
other.$on("call", function (data) {
that.ming_say = data
})
}
}; // vue实例1
const app = new Vue({
el: "#app",
components: {
ming: ming_config,
}
}); // vue实例2
const app2 = new Vue({
el: "#app2",
components: {
hong: hong_config,
}
})
</script>
</body> </html>
三、混合和插槽
1、混合
1. 当两个组件复用共用的代码块时
2. 定义公共的代码块
3. 复用语法：mixins: [变量名]
4. demo
<body>
<div id="app">
<com1></com1>
<com2></com2>
</div> <script>
// 定义公用代码
let base = {
data() {
return {
is_show: false
}
},
methods: {
show_text: function(){
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 v-on="{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>
2、 插槽
命名的插槽
1. 把组件的template定义在html里面
2. 在script中通过id找到这段template
3. template代码内定义slot插槽，并使用name属性区分不同的插槽信息
4. 使用组件的时候通过slot="name"，可以给组件添加上不同的内容
5. 生成的组件代码中不会有template标签
6.使用命名插槽时，跟使用标签的属性一样
7. demo
<body>
<div id="app">
<com>
<h3 slot="title">Python</h3>
<p slot="brief">从入门到精通</p>
</com>
<com>
<h3 slot="title">Mysql</h3>
<p slot="brief">从删库到跑路</p>
</com>
</div>
<!--组件的template还可以单独写出来-->
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<!--用slot定义插槽-->
<slot name="title"></slot>
<slot name="brief"></slot>
<hr>
</div>
</template> <script>
let com = {
// 找到template模板
template: "#my_com"
};
const app = new Vue({
el: "#app",
components: {
com: com
}
})
</script>
</body>
不命名的插槽
1. template中的的slot不需要设置name属性
2. 使用组件的时候，直接用slot标签
3.使用不命名插槽时，当做标签使用
4. demo
<body>
<div id="app">
<com>
<slot>Python</slot>
</com>
<com>
<slot>Mysql</slot>
</com>
</div>
<!--组件的template还可以单独写出来-->
<template id="my_com">
<div>
<h1>这是一个组件</h1>
<!--用slot定义插槽-->
<slot></slot>
<hr>
</div>
</template> <script>
let com = {
// 找到template模板
template: "#my_com"
};
const app = new Vue({
el: "#app",
components: {
com: com
}
})
</script>
</body>
Vue组件以及组件之间的通信的更多相关文章
- Vue.js组件之同级之间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue的父子组建之间的通信(-)，基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...
- vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制
前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...
- vue工程利用pubsub-js实现兄弟组件之间的通信
前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
随机推荐
- 前端入门19-JavaScript进阶之闭包
声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
- 一文看懂HTTPS的核心知识
1.HTTPS历史 由于HTTP的消息传输的安全隐患,于是网景公司在1994年设计了SSL(Secure Sockets Layer,安全套接字层)协议,目的是保障网上交易安全,从而就诞生了HTTPS ...
- Approval Process 在 Apex 中的使用
Approval Process(批准过程)简介 批准过程是一个复杂的业务过程.详细的内容可以参考官方文档. 英文版 中文版 官方trailhead模块 在Apex中调用Approval Proces ...
- ES6常用
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准. 因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015(简称ES2015).虽然浏览器在不 ...
- react基础语法二
这里只是对自己的学习进行一次总结,也是为了让自己以后如果长时间不使用快速记忆起来的笔记,如果想要学习,还是去官网看文档比较好一些.. 注意 下面的代码的 script标签的type类型都为 “text ...
- Workspace in use or cannot be created, choose a different one.
eclipse 使用一段时间后,有时会因为一些故障自己就莫名奇妙的关闭了,再打开时有时没有问题,有时有会提示错误 Workspace Unavailable: Workspace in use o ...
- SQLServer\framework启动报异常：Module的类型初始值设定项引发异常
net framework卸载 重装 https://download.microsoft.com/download/E/4/1/E4173890-A24A-4936-9FC9-AF930FE3FA4 ...
- js调用浏览器打印指定div内容
--打印按钮事件 function printForm(){ var headstr = '<html xmlns:th="http://www.thymeleaf.org&qu ...
- 图解slub
1.前言 在Linux中,伙伴系统(buddy system)是以页为单位管理和分配内存.但是现实的需求却以字节为单位,假如我们需要申请20Bytes,总不能分配一页吧!那岂不是严重浪费内存.那么该如 ...
- Windows系统资源监控
1.windows自带系统资源监控工具 2.Windows监控的数据来源:Performance Counters 2.1 Performance Counter架构 2.2 Performance ...