一、组件通信

　　① 父 => 子

　　-- 步骤

　　　　1）子组件中通过 props 键接受父组件传值

　　　　2）父组件通过 v-bind 向子组件传值

　　--例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Document</title>
  5.         <meta charset="UTF-8">
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <parent></parent>
  10.         </div>
  11.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  12.         <script>
  13.             Vue.component('parent',{
  14.                 data(){
  15.                     return {
  16.                         parentMsg : 'parent'
  17.                     }
  18.                 },
  19.                 template:`
  20.                 <div>
  21.                     <p>父组件</p>
  22.                     <p>组件值 {{ parentMsg }}</p>
  23.  
  24.                     //调用子组件，并传值
  25.                     <son v-bind:sendMsg="parentMsg"></son>
  26.                 </div>
  27.                 `,
  28.                 // 子组件
  29.                 components:{
  30.                     son:{
  31.                         //接受父组件传递的值
  32.                         props:['sendMsg'],
  33.                         template:`
  34.                         <div>
  35.                             <p>子组件</p>
  36.                             <p>接受父组件的值：{{ sendMsg }}</p>
  37.                         </div>
  38.                         `
  39.                     }
  40.                 }
  41.             })
  42.  
  43.             let vm = new Vue({
  44.                 el: '#app',
  45.             })
  46.         </script>
  47.     </body>
  48. </html>

效果图：

　　② 子 => 父

　　-- 步骤

　　　　1）子组件自定义事件，通过 $emit 触发

　　　　　　语法：this.$emit( ' 事件名称 '，数据1，... ，数据n )

　　　　2）父组件调用事件获取数据

　　-- 例子

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>Document</title>
  6.     <meta charset="UTF-8">
  7. </head>
  8.  
  9. <body>
  10.     <div id="app">
  11.         <parent></parent>
  12.     </div>
  13.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  14.     <script>
  15.         Vue.component('parent', {
  16.             data(){
  17.                 return {
  18.                     sendsonMsg:null
  19.                 }
  20.             },
  21.             template: `
  22.                 <div>
  23.                     <p>父组件</p>
  24.                     <p>子组件值 {{ sendsonMsg }}</p>
  25.  
  26.                     <!-- 2.调用子组件 -->
  27.                     <son @sonSend = 'showSonMsg'></son>
  28.                 </div>
  29.                 `,
  30.                 methods: {
  31.                     // 3.定义方法
  32.                     showSonMsg(data){
  33.                         this.sendsonMsg = data;
  34.                     }
  35.                 },
  36.             // 子组件
  37.             components: {
  38.                 son: {
  39.                     template: `
  40.                         <div>
  41.                             <p>子组件</p>
  42.                             <p>子组件的值：{{ sonMsg }}</p>
  43.                         </div>
  44.                         `,
  45.                     data() {
  46.                         return {
  47.                             sonMsg:'sonData'
  48.                         }
  49.                     },
  50.                     // 1.$emit 触发
  51.                     mounted() {
  52.                         this.$emit('sonSend', this.sonMsg)
  53.                     },
  54.                 }
  55.             }
  56.         })
  57.  
  58.         let vm = new Vue({
  59.             el: '#app',
  60.         })
  61.     </script>
  62. </body>
  63.  
  64. </html>

效果图

　　③ 兄弟组件通信 （event bus）

　　 -- 步骤

　　　　1）定义数据共享中心

　　　　　　const eventBus = new Vue();

　　　　2）发送数据

　　　　　　eventBus .$emit( ' 事件名 '，数据1，... ，数据n )

　　　　3）接收数据

　　　　　　eventBus .$on(' 事件名 '，处理函数)

　　-- 例子

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Document</title>
  5.         <meta charset="UTF-8">
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <mytag1></mytag1>
  10.             <mytag2></mytag2>
  11.         </div>
  12.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  13.         <script>
  14.  
  15.             Vue.component('mytag1',{
  16.                 data(){
  17.                     return {
  18.                         tagMsgOne:'tag1Data',
  19.                         tagMsg:null
  20.                     }
  21.                 },
  22.                 template:`
  23.                 <div>
  24.                     <p>兄弟组件一</p>
  25.                     <button @click='sendDataOne'>传递信息</button>
  26.                     <p>兄弟组件一数据：{{ tagMsgOne }}</p>
  27.                     <p>兄弟组件二传递的数据：{{ tagMsg }}</p>
  28.                     <hr />
  29.                 </div>
  30.                 `,
  31.                 methods: {
  32.                     sendDataOne(){
  33.                         eventBus.$emit('event', this.tagMsgOne)
  34.                     }
  35.                 },
  36.                 mounted(){
  37.                     // 3.接收数据
  38.                     eventBus.$on('tagTwo',(data) => {
  39.                         this.tagMsg = data
  40.                     })
  41.                 }
  42.             })
  43.  
  44.             Vue.component('mytag2',{
  45.                 data(){
  46.                     return {
  47.                         tagMsgTwo:'tag2Data',
  48.                         tagMsg:null
  49.                     }
  50.                 },
  51.                 template:`
  52.                 <div>
  53.                     <p>兄弟组件二</p>
  54.                     <button @click='sendDataTwo'>传递信息</button>
  55.                     <p>兄弟组件二数据：{{ tagMsgTwo }}</p>
  56.                     <p>兄弟组件一传递数据：{{ tagMsg }}</p>
  57.                 </div>
  58.                 `,
  59.                 mounted() {
  60.                     eventBus.$on('event',(data) => {
  61.                         this.tagMsg = data;
  62.                     })
  63.                 },
  64.                 methods:{
  65.                     // 2.发送数据
  66.                     sendDataTwo(){
  67.                         eventBus.$emit('tagTwo',this.tagMsgTwo)
  68.                     }
  69.                 }
  70.             })
  71.  
  72.             // 1.创建共享数据中心
  73.             const eventBus = new Vue();
  74.  
  75.             let vm = new Vue({
  76.                 el: '#app',
  77.                 data: {
  78.  
  79.                 },
  80.                 methods: {
  81.  
  82.                 }
  83.             })
  84.         </script>
  85.     </body>
  86. </html>

效果图

二、solt 插槽

　　为什么要用插槽：封装一个组件，每次调用显示不同的信息

　　① 后备内容

　　-- 步骤

　　　　1）定义组件时内容去用 <slot></slot> 占位

　　　　2）调用组件时，组件标签内容后同步到插槽占位符中

　　--例子

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Document</title>
  5.         <meta charset="UTF-8">
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <mytag>提示信息</mytag>
  10.         </div>
  11.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  12.         <script>
  13.             // 定义组件
  14.             Vue.component('mytag',{
  15.                 template:`
  16.  
  17.                 <div style='border:1px solid red;max-width:200px'>
  18.                     <!-- 占位符 -->
  19.                     <slot></slot>
  20.                 </div>
  21.  
  22.                 `
  23.             })
  24.  
  25.             let vm = new Vue({
  26.                 el: '#app',
  27.             })
  28.         </script>
  29.     </body>
  30. </html>

效果图

　　② 具名插槽

　　--步骤

　　　　1）定义组件时，用 slot 占位

　　　　　　<slot name=' 标识 '></slot>

　　　　2）调用组件时，根据标识显示数据

　　　　　　<template v-slot:标识>

　　　　　　　　//html 标签

　　　　　　</template>

　　--例子

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <title>Document</title>
  5.         <meta charset="UTF-8">
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <mytag>
  10.                 <template v-slot:test>
  11.                     test
  12.                 </template>
  13.             </mytag>
  14.         </div>
  15.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  16.         <script>
  17.  
  18.             // 定义显示数据
  19.  
  20.             // 定义组件
  21.             Vue.component('mytag',{
  22.                 template:`
  23.                 <div style='border:1px solid red;max-width:200px'>
  24.                     <!-- 占位符 -->
  25.                     <slot name= 'test'></slot>
  26.                 </div>
  27.                 `
  28.             })
  29.  
  30.             let vm = new Vue({
  31.                 el: '#app',
  32.             })
  33.         </script>
  34.     </body>
  35. </html>

效果图

　　③ 作用域插槽

　　--步骤

　　　　1）定义组件时，用 slot 占位

　　　　　　<slot name=' 标识 ' v-bind:任意名称 = ' data 中的键 '></slot>

　　　　2）调用组件

　　　　　　<template v-slot:标识 = ' 任意名称 '>

　　　　　　　　//html 标签

　　　　　　</template>

　　--例子

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <title>Document</title>
  6.     <meta charset="UTF-8">
  7. </head>
  8.  
  9. <body>
  10.  
  11.     <div id="app">
  12.         <mytag>
  13.             <template v-slot:index='item'>
  14.                 this is index
  15.                 {{ item.data }}
  16.             </template>
  17.         </mytag>
  18.     </div>
  19.     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  20.     <script>
  21.  
  22.         // 定义显示数据
  23.  
  24.         // 定义组件
  25.         Vue.component('mytag', {
  26.             data() {
  27.                 return {
  28.                     msg1:'msg1',
  29.                     msg2:'msg2'
  30.                 }
  31.             },
  32.             template: `
  33.                 <div>
  34.                     <!-- 占位符 -->
  35.                     <slot name='index' :data='msg1'></slot>
  36.                 </div>   `
  37.         })
  38.         let vm = new Vue({
  39.             el: '#app',
  40.         })
  41.     </script>
  42. </body>
  43.  
  44. </html>

效果图

  1. 特此声明：如需转载请注明出处，如有疑问请及时提出以便于改正，如有侵权，联系删除，谢谢

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. emacs第二天

    setq 和setq-default的区别 cursor-type是一个buffer local 变量 在每一份buffer中都有一份值 如果变量是buffer local 里面的变量 setq-de ...

  2. mysql数据库锁的机制-one

    锁概念 : 当高并发访问同一个资源时,可能会导致数据不一致,需要一种机制将用户访问数据的顺序进行规范化,以保证数据库数据的一致性.锁就是其中的一种机制. 举例 :以买火车票为例,火车票可面向广大消费者 ...

  3. freeradius client 和jradius安装编译

    freeradius client radtest只是用来调试的,radclient功能更强大.用法如下: From the man page we can see that radclient gi ...

  4. TDD具体实施过程，可以看作两个层次

    在代码层次,在编码之前写测试脚本,可以称为单元测试驱动开发(Unit Test Driven Development,UTDD) 在业务层次,在需求分析时就确定需求(如用户故事)的验收标准,即验收测试 ...

  5. redis 键值对 有效期设置

    redis 键值对 有效期设置redis中可以使用expire命令设置一个键的生存时间, 到时间后redis会自动删除它<-----> 类比于javaweb系统临时数据 过期删除功能 ex ...

  6. Spring Security教程之退出登录logout（十）

    要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...

  7. Java编程思想之十八 枚举类型

    关键字enum可以将一组具名的值的有限集合创建为一种新的类型, 而这些具名的值可以作为常规的程序组件使用.这是一种非常有用的功能. 18.1 基本enum特性 创建enum时,编译器会为你生成一个相关 ...

  8. 哈夫曼树的构建（C语言）

    哈夫曼树的构建(C语言) 算法思路: 主要包括两部分算法,一个是在数组中找到权值最小.且无父结点两个结点位置,因为只有无父结点才能继续组成树: ​ 另一个就是根据这两个结点来修改相关结点值. 结构定义 ...

  9. excel绘制多列 其中一列作为横坐标 ； 数值拟合

    excel绘制多列,其中最左列作为横纵坐标: 选中很多列,然后,,点击菜单栏的“插入”->“图标” -->在弹出的“插入图表”对话框中选择“X Y(散点图)”,默认是条形图.  左边的列会 ...

  10. Apache信息头

    package org.apache.http; public final class HttpHeaders { public static final String ACCEPT = " ...