07-组件通信、slot插槽
一、组件通信
① 父 => 子
-- 步骤
1）子组件中通过 props 键接受父组件传值
2）父组件通过 v-bind 向子组件传值
--例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('parent',{
data(){
return {
parentMsg : 'parent'
}
},
template:`
<div>
<p>父组件</p>
<p>组件值 {{ parentMsg }}</p> //调用子组件，并传值
<son v-bind:sendMsg="parentMsg"></son>
</div>
`,
// 子组件
components:{
son:{
//接受父组件传递的值
props:['sendMsg'],
template:`
<div>
<p>子组件</p>
<p>接受父组件的值：{{ sendMsg }}</p>
</div>
`
}
}
}) let vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
效果图：
② 子 => 父
-- 步骤
1）子组件自定义事件，通过 $emit 触发
语法：this.$emit( ' 事件名称 '，数据1，... ，数据n )
2）父组件调用事件获取数据
-- 例子
<!DOCTYPE html>
<html lang="en"> <head>
<title>Document</title>
<meta charset="UTF-8">
</head> <body>
<div id="app">
<parent></parent>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('parent', {
data(){
return {
sendsonMsg:null
}
},
template: `
<div>
<p>父组件</p>
<p>子组件值 {{ sendsonMsg }}</p> <!-- 2.调用子组件 -->
<son @sonSend = 'showSonMsg'></son>
</div>
`,
methods: {
// 3.定义方法
showSonMsg(data){
this.sendsonMsg = data;
}
},
// 子组件
components: {
son: {
template: `
<div>
<p>子组件</p>
<p>子组件的值：{{ sonMsg }}</p>
</div>
`,
data() {
return {
sonMsg:'sonData'
}
},
// 1.$emit 触发
mounted() {
this.$emit('sonSend', this.sonMsg)
},
}
}
}) let vm = new Vue({
el: '#app',
})
</script>
</body> </html>
效果图
③ 兄弟组件通信 （event bus）
-- 步骤
1）定义数据共享中心
const eventBus = new Vue();
2）发送数据
eventBus .$emit( ' 事件名 '，数据1，... ，数据n )
3）接收数据
eventBus .$on(' 事件名 '，处理函数)
-- 例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<mytag1></mytag1>
<mytag2></mytag2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> Vue.component('mytag1',{
data(){
return {
tagMsgOne:'tag1Data',
tagMsg:null
}
},
template:`
<div>
<p>兄弟组件一</p>
<button @click='sendDataOne'>传递信息</button>
<p>兄弟组件一数据：{{ tagMsgOne }}</p>
<p>兄弟组件二传递的数据：{{ tagMsg }}</p>
<hr />
</div>
`,
methods: {
sendDataOne(){
eventBus.$emit('event', this.tagMsgOne)
}
},
mounted(){
// 3.接收数据
eventBus.$on('tagTwo',(data) => {
this.tagMsg = data
})
}
}) Vue.component('mytag2',{
data(){
return {
tagMsgTwo:'tag2Data',
tagMsg:null
}
},
template:`
<div>
<p>兄弟组件二</p>
<button @click='sendDataTwo'>传递信息</button>
<p>兄弟组件二数据：{{ tagMsgTwo }}</p>
<p>兄弟组件一传递数据：{{ tagMsg }}</p>
</div>
`,
mounted() {
eventBus.$on('event',(data) => {
this.tagMsg = data;
})
},
methods:{
// 2.发送数据
sendDataTwo(){
eventBus.$emit('tagTwo',this.tagMsgTwo)
}
}
}) // 1.创建共享数据中心
const eventBus = new Vue(); let vm = new Vue({
el: '#app',
data: { },
methods: { }
})
</script>
</body>
</html>
效果图
二、solt 插槽
为什么要用插槽：封装一个组件，每次调用显示不同的信息
① 后备内容
-- 步骤
1）定义组件时内容去用 <slot></slot> 占位
2）调用组件时，组件标签内容后同步到插槽占位符中
--例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<mytag>提示信息</mytag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义组件
Vue.component('mytag',{
template:` <div style='border:1px solid red;max-width:200px'>
<!-- 占位符 -->
<slot></slot>
</div> `
}) let vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
效果图
② 具名插槽
--步骤
1）定义组件时，用 slot 占位
<slot name=' 标识 '></slot>
2）调用组件时，根据标识显示数据
<template v-slot:标识>
//html 标签
</template>
--例子
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<mytag>
<template v-slot:test>
test
</template>
</mytag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> // 定义显示数据 // 定义组件
Vue.component('mytag',{
template:`
<div style='border:1px solid red;max-width:200px'>
<!-- 占位符 -->
<slot name= 'test'></slot>
</div>
`
}) let vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
效果图
③ 作用域插槽
--步骤
1）定义组件时，用 slot 占位
<slot name=' 标识 ' v-bind:任意名称 = ' data 中的键 '></slot>
2）调用组件
<template v-slot:标识 = ' 任意名称 '>
//html 标签
</template>
--例子
<!DOCTYPE html>
<html lang="en"> <head>
<title>Document</title>
<meta charset="UTF-8">
</head> <body> <div id="app">
<mytag>
<template v-slot:index='item'>
this is index
{{ item.data }}
</template>
</mytag>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> // 定义显示数据 // 定义组件
Vue.component('mytag', {
data() {
return {
msg1:'msg1',
msg2:'msg2'
}
},
template: `
<div>
<!-- 占位符 -->
<slot name='index' :data='msg1'></slot>
</div> `
})
let vm = new Vue({
el: '#app',
})
</script>
</body> </html>
效果图
特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢
07-组件通信、slot插槽的更多相关文章
- 总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...
- 8.Vue组件三---slot插槽
主要内容: 1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...
- 组件：slot插槽
<!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- Vue slot 插槽用法：自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
随机推荐
- jsp获取map
1.简单Map User user = new User(); user.setName("zmy"); user.setAge(); user.setBirthday(new D ...
- Cantor表-（模拟）
链接:https://ac.nowcoder.com/acm/contest/1069/I来源:牛客网 题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一 ...
- js闭包理解与使用场景
要理解闭包首先要知道什么是函数的作用域链 因为有函数的作用域链存在,所以函数无论在哪里调用,函数都可以使用函数外部作用域的变量. 当一个函数被调用时,会创建一个执行环境及相应的作用域链.然后使用arg ...
- html--JavaScript之DOM (文档对象模型)
一.简介 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...
- django ORM创建
简短的例子 from django.db import models class Person(models.Model): first_name = models.CharField(max_len ...
- three.js 居中-模型
api: 代码: <!DOCTYPE html> <html lang="en"> <head> <title>three.js w ...
- docker镜像编码注意事项
第一步:下面这些话如果你不知道我在说什么,只管粘贴复制然后按回车键等待执行完成就行,一步步来不要着急. 首先安装docker,ubuntu18.04安装docker很简单只需要 一行命令 wget - ...
- 【Kubernetes学习之三】Kubernetes分布式集群架构
环境 centos 7 一.Kubernetes分布式集群架构1.Kubernetes服务注册和服务发现问题怎么解决的?每个服务分配一个不变的虚拟IP+端口, 系统env环境变量里有每个服务的服务名称 ...
- iOS 测试 WebDriverAgent 简介
WebDriverAgent 是什么 去年的 SeleniumConf 上,Facebook 推出了一款新的iOS移动测试框架 —— WebDriverAgent,当时的推文上,写的还只支持模拟器 ...
- FPGA 开发板入手途径有哪些呢？
买到一块 FPGA 开发板,你如何入手呢? 根据博主的经验,你可以通过如下途径来学习: 1.如果你是淘宝上买的,那么可以在淘宝上搜索你的开发板(一般 FPGA 开发板生厂商在淘宝上卖都会附带教程,如米 ...