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() 来劫 ...
随机推荐
- Java的修饰、继承、接口、抽象类
1.private 修饰属性或者方法,只能在本类中被访问,定义后需要加get()set()方法,这样提高数据的安全性 私有属性虽然不能直接访问,但是其对象 或者 子类对象可以通过公有方法进行设值和获 ...
- DS18B20温度获取
https://detail.tmall.com/item.htm?id=40083203373&spm=a1z09.2.0.0.31cd2e8d1sb06V&_u=e1qf7bf56 ...
- 9-3 deepsort在win10配置
win10+python3.5+tensorflow https://blog.csdn.net/Draw_1999/article/details/79735677 deep-sort https: ...
- 【可持久化0/1Trie】【P4735】最大异或和
Description 给定一个长度为 \(n\) 的序列 \(A\),有 \(m\) 次操作,每次要么在序列尾部再添加一个数,将序列长度 \(n\) 加一,要么给进行一次查询,给定查询参数 \(l, ...
- PATA1077Kuchiguse
需要注意的有关于二维字符串数组的输入问题,先是定义要多留一位用于存放'\0' 还有就是使用scanf后,会有回车换行符,如果要使用gets或是接下来的方式代替gets,记得加上getchar,不然会出 ...
- Unix/Linux系统下的nobody用户是什么？
1.Windows系统在安装后会自动建立一些用户帐户,在Linux系统中同样有一些用户帐户是在系统安装后就有的,就像Windows系统中的内置帐户一样. 2.它们是用来完成特定任务的,比如nobody ...
- java_home not found in your enviroment 问题解决方法
java_home not found in your enviroment 错误原因有一下几点 1. JAVA_HOME系统环境没配置, JAVA_HOME环境变量配置方法: <1> 右 ...
- 第02组 Alpha冲刺（1/6）
队名:無駄無駄 组长博客 作业博客 组员情况 张越洋 过去两天完成了哪些任务 如何进行团队代码的版本管理 如何使用微信云开发 如何使用管理微信开发团队 接下来的计划 沟通前后端成员,监督.提醒他们尽快 ...
- Adobe Illustrator 入门 新建 保存图片
下载 AI 的破解版 我这里用的是 Adobe_Illustrator CC 2019 Lite 精简特别版 V23.0.2 简体中文版 64位 安装略 新建文档 通常是 A4 图形绘制 选择 矩形工 ...
- c# winFrom Close报错 System.ObjectDisposedException:“无法访问已释放的对象。
System.ObjectDisposedException:“无法访问已释放的对象. ObjectDisposed_ObjectName_Name” 查了一下发现是 InitializeCompon ...