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() 来劫 ...
随机推荐
- FFT和NTT学习笔记_基础
FFT和NTT学习笔记 算法导论 参考(贺) http://picks.logdown.com/posts/177631-fast-fourier-transform https://blog.csd ...
- Qt常用类——QWidget
QWidget类是所有用户界面对象的基类. Widget是用户界面的基本单元:它从窗口系统接收鼠标,键盘和其他事件,并在屏幕上绘制自己. 每个Widget都是矩形的,它们按照Z-order进行排序.
- ubuntu命令总结 持续更新 补充
总结一下Ubuntu常用命令 top sudo apt-get install 软件名 安装软件命令 sudo nautilus 打开文件(有root权限) su root 切换到“root” l ...
- 第10组 Beta版本演示
一.小组信息 组长博客链接 组名:凹秃曼 组内成员 学号 组员 031702240 童景霖(组长) 031702225 叶泽林 031702246 陈鸿立 031702201 万本琳 03170222 ...
- Rattle
Rattle使用RGtk2 包提供的Gnome图形用户界面,可以在WINDOWS,MAC OS/X,Linux等多个系统中使用. Rattle基于大量的R包:RGtk2, pmml, colorspa ...
- 把ubuntu自带的高gcc版本降到低版本（如gcc 3.4）的方法
转载自: 博客1.博客2 .博客3 步骤 第一步: 下载所需gcc安装包(.deb格式) 手动:老版本gcc下载地址:http://old-releases.ubuntu.com/ubuntu/poo ...
- elasticsearch容量规划
https://docs.bonsai.io/article/123-capacity-planning Capacity Planning Capacity planning is the proc ...
- Struts2利用iText导出word文档（包含表格）以提供下载
J2EE ExcelStrutsXML 在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了, ...
- Sitecore安全性第1部分：自定义角色和权限
安全性是任何Sitecore构建的重要组成部分.它可确保您的内容作者具有适当级别的访问权限,以管理他们拥有的内容,并授予他们访问不同Sitecore功能的权限. Sitecore附带了许多提供功能访问 ...
- 配置opencv cmake
第一种使用 find_package的方法示例代码如下:# 声明要求的 cmake 最低版本cmake_minimum_required( VERSION 2.8 ) # 声明一个 cmake 工程p ...