一、组件通信

  ① 父 => 子

  -- 步骤

    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插槽的更多相关文章

  1. 总结Vue第二天:自定义子组件、父子组件通信、插槽

    总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...

  2. 8.Vue组件三---slot插槽

    主要内容:  1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...

  3. 组件:slot插槽

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  5. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  6. 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽

    今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...

  7. Vue slot 插槽用法:自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  8. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  9. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

随机推荐

  1. jsp获取map

    1.简单Map User user = new User(); user.setName("zmy"); user.setAge(); user.setBirthday(new D ...

  2. Cantor表-(模拟)

    链接:https://ac.nowcoder.com/acm/contest/1069/I来源:牛客网 题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一 ...

  3. js闭包理解与使用场景

    要理解闭包首先要知道什么是函数的作用域链 因为有函数的作用域链存在,所以函数无论在哪里调用,函数都可以使用函数外部作用域的变量. 当一个函数被调用时,会创建一个执行环境及相应的作用域链.然后使用arg ...

  4. html--JavaScript之DOM (文档对象模型)

    一.简介 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标 ...

  5. django ORM创建

    简短的例子 from django.db import models class Person(models.Model): first_name = models.CharField(max_len ...

  6. three.js 居中-模型

    api: 代码: <!DOCTYPE html> <html lang="en"> <head> <title>three.js w ...

  7. docker镜像编码注意事项

    第一步:下面这些话如果你不知道我在说什么,只管粘贴复制然后按回车键等待执行完成就行,一步步来不要着急. 首先安装docker,ubuntu18.04安装docker很简单只需要 一行命令 wget - ...

  8. 【Kubernetes学习之三】Kubernetes分布式集群架构

    环境 centos 7 一.Kubernetes分布式集群架构1.Kubernetes服务注册和服务发现问题怎么解决的?每个服务分配一个不变的虚拟IP+端口, 系统env环境变量里有每个服务的服务名称 ...

  9. iOS 测试 WebDriverAgent 简介

    WebDriverAgent 是什么   去年的 SeleniumConf 上,Facebook 推出了一款新的iOS移动测试框架 —— WebDriverAgent,当时的推文上,写的还只支持模拟器 ...

  10. FPGA 开发板入手途径有哪些呢?

    买到一块 FPGA 开发板,你如何入手呢? 根据博主的经验,你可以通过如下途径来学习: 1.如果你是淘宝上买的,那么可以在淘宝上搜索你的开发板(一般 FPGA 开发板生厂商在淘宝上卖都会附带教程,如米 ...