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() 来劫 ...
随机推荐
- AJAX异步更改数据库
前段时间做了一个小网站,里面有个小功能感觉挺好的,在此与大家分享一下,还请各位大神不要笑话小弟的无知. 此功能大概是这个样子的:点击下图中的类别名称,就可以对类别进行修改. 点击类别名称以后,原来的表 ...
- JQuery校验时间大小
常用于按时间条件(起始日-截止日)查询时,进行校验 function checkDate(){ var startTime = $('#startTime').val(); var endTime = ...
- 【border树】【P2375】动物园
Description 给定一个字符串 \(S\),对每个前缀求长度不超过该前缀一半的公共前后缀个数. 共有 \(T\) 组数据,每组数据的输出是 \(O(1)\) 的. Limitations \( ...
- Salesforce 开发整理（四）记录锁定
如果一个对象的记录在满足某个条件的情况下,希望能对其进行锁定,即普通用户没有权限对其进行编辑操作,记录页面显示如下图 一般会在提交审批,或者项目进行到某个阶段的情况下,由后台进行判断要不要锁定记录,或 ...
- 几句话总结一个算法之Policy Gradients
强化学习与监督学习的区别在于,监督学习的每条样本都有一个独立的label,而强化学习的奖励(label)是有延后性,往往需要等这个回合结束才知道输赢 Policy Gradients(PG)计算某个状 ...
- java基础 类 & 继承
类 在Java中,类文件是以.java为后缀的代码文件,在每个类文件中可以有多个类,但是最多只允许出现一个public类,当有public类的时候,类文件的名称必须和public类的名称相同,若不存在 ...
- [BUAA软工]团队贡献分博客
Gamma阶段贡献分 Beta阶段贡献分 Alpha阶段贡献分 (博客最后部分) 复制过来: Alpha阶段 名字 角色 具体的可衡量的可验证的贡献 zpj PM,后端开发 博客X3 65 commi ...
- html页面添加左侧滑动菜单与内容部分的滚动条
html + css + jquery 展示地址:https://migloo.gitee.io/front 或 https://www.igloo.xin/front 思路: 1.通过jquery ...
- shell（一） shell变量
基本介绍 变量命名规范 变量名要求由字母.数字.下划线组成,尽量字母开头,有明确含义 注意:变量赋值时,等号前后不能有空格,变量名称不能和字体变量冲突 自定义变量 当前shell有效 1.定义变量 v ...
- Orm 入门总指南
注意:下面的pdf文件强烈建议下载或在线查看 1)旗舰版帮助文档点击查看或下载 2)http://pan.baidu.com/s/1hq7krFu(新手手册下载)(强烈推荐) 3)性能及规范下载,网友 ...